Vue之beforeEach非登录不能访问的实现（代码亲测）
作者：快醒醒
这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
后台的php请求就是接收这两个参数
login.vue
<template>
<div class=''>
<input type="text" v-model="name" />
<input type="password" v-model="password" />
<button type="primary" @click="submitForm"><router-link :to="{path:'/'}">提交</router-link></button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data(){
return{
name:'',
password:'',
}
},
methods:{
submitForm:function(){
var params = new URLSearchParams();
params.append('name', this.name);
params.append('password',this.password);
axios({
method: 'post',
url: '/api/bbb.php',
data:params
}).then((resp)=>{
sessionStorage.setItem('token',resp.status)// localStorage
//以key value的形式将值存放到sessionStorage中。
console.log(resp);
}).catch((error)=>{
console.log(error);
})
}
}
}
</script>
router
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta:{requireAuth:true}
},
main.js
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
console.log( sessionStorage.getItem('token'))
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if(sessionStorage.getItem('token')){ //判断sessionStorage是否存在token
alert("已经登录了")
next();
}else{
//防止死循环
alert("暂时未登录")
if (to.path === '/login') {
next();
return
}else{
next({
path: '/login',
});
}
}
}
else {
next();
}
/*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
if(to.fullPath == "/login"){
if(localStorage.getItem('token')){
next({
path:from.fullPath
});
}else {
next();
}
}
});
注意一定要在router实例前使用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。