vue路由守卫,限制前端页面访问权限的例子
今天给大家写一篇关于vue校验登录状态，如果是非法登录就跳转到登录页面的逻辑
首先需要写一个路由守卫，它的原理是每次路由发生变化时触发具体写法如下：
router.beforeEach((to,from,next)=>{
next()
})
beforeEach函数有三个参数：
to:即将进入的路由对象
from:当前导航即将离开的路由
next,进行管道中的一个钩子，如果执行完了，则导航的状态就是confirmed（确认的）；否则为false，终止导航。
使用案例
限制登陆功能，具体实现思路：每次跳转路由是判断本地localStorage.getItem('token')状态
首先找到router/index.js如下
importVuefrom'vue'
importRouterfrom'vue-router'
Vue.use(Router)
constrouter=newRouter({
routes:[{
path:'/',
name:'HelloWorld',
component:HelloWorld
},
{
path:'/login',
name:'login',
component:login
}
]
})
//下面是重点
router.beforeEach((to,from,next)=>{
lettoken=localStorage.getItem('token')
if(to.path=='/login'){
next()
}else{
if(token==''||token==null){
next('/login');
}else{
next()
}
}
})
exportdefaultrouter;
解释：index.js写成如上形式，用constrouter接受newRouter对象，最后export暴露出去
router.beforeEach在每次路由跳转出发
lettoken=localStorage.getItem('token')获取本地没有没token如果没有就跳到login页面很简单的逻辑
以上这篇vue路由守卫,限制前端页面访问权限的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。