vue-router 路由守卫与 vuex

最新推荐文章于 2024-05-11 21:53:02 发布

json-yc

最新推荐文章于 2024-05-11 21:53:02 发布

阅读量1.3k

点赞数

分类专栏： vue vue-router 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44968614/article/details/107184840

版权

3 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

vue是单页面应用，各个页面的跳转需要路由支持，当然也可以 v-if/v-show，但是实际开发中不现实

为一个项目做鉴权就可以用解决方案去vuex里面读取状态，根据状态来调用 vue-router的路由守卫来实现，鉴权路由跳转

官方链接：

写判断逻辑的时候一定要注意next()的调用，不能多重调用会形成死循环，最少要调用一次，不然不会跳转

这两张图可以看出它的运行机制，在每次跳转前都会执行 beforeEach（），

to.path === '/login'  为true  就会执行  next('/login')  ；其实执行next('/login')  又会执行beforeEach（） 所以一直在循环执行，就相当于 路由一直在跳转“/login” 之前  一直没跳成功

直接调用next() 让其成功跳转一次就可以出‘/login’的循环

就相当于一次 next（）的调用要对应一次成功的路由跳转，上面的情况就是调用了又没有成功跳转，所以一直在哪儿循环...

鉴权超时登录利用vuex可以存储个时间戳

因为没有后端支持所以存了个本地，实际开发前后端分离是应该从服务器读取数据

关注