当前业务要求:
通过判断本地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官网也有说明出现死循环的代码: