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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。