Vue路由守卫+token失效时返回失效时页面

419 阅读1分钟

在路由导航守卫中,token失效时

``

router.beforeEach((to, from, next) =>{
if (getToken()) {
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 全部重定向到登录页
    }
}

实现方式

在router.js中

router.beforeEach((to, form, next) => {
    let token = sessionStorage.getItem('token')
    if (to.matched.some((item) => { return item.meta.isLogin })) {
        if (!token) {
            next({ name: 'login', query: { redirect: to.fullPath } })
        } else {
            next()
        }
    } else {
        next()
    }
})

登录成功后

1、把用户信息保存下来 llocalStorage.setItem(“accessToken”, res.data.access_token);

2、跳转页面时不能写死写成首页,而是下面这个:

       // 登录跳转不能写死 
       let redirect=decodeURIComponent(this.$route.query.redirect||'/index')
       this.$router.push({path:redirect});