vue路由守卫死循环和路由守卫使用
当前业务要求:
通过判断本地sessionstorge判断当前是否需要登陆页面
问题场景:用户登陆进入页面内部,点击退出登录,清除本地用户信息,页面跳转至登陆页面,使用浏览器的回退可以正常返回至项目内部。需要改成:停留在登陆页面。
解决方式:使用vue的路由守卫
router.beforeEach((to, from, next) => {
let token = sessionStorage.getItem("currentUser");
if (token) {
next();
} else {
if (to.path == "/login") {
next();
} else {
next({ path: "/login" });
}
}
});
按照正常逻辑处理:获取token,判断token,如果有token正常处理,没有token直接跳转login页面。但是会出现死循环。
出现原因:每次跳转时都会触发全局守卫,但是判断的条件没有变,所以一直循环。
beforeEach传参解释:
to:即将进入的目标
from:当前导航正要离开的路由
可以返回的值:
- false:取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
- 一个路由地址: 通过一个路由地址跳转到一个不同的地址,就像你调用 router.push() 一样,你可以设置诸如 replace: true 或 name: ‘home’ 之类的配置。当前的导航被中断,然后进行一个新的导航,就和 from 一样。
看到vue-router官网也有说明出现死循环的代码:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghfhhg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13