vue 需要登录、不需要登录访问的页面都在login后回到之前的页面

最近在一个前台项目,个人中心需要登录之后才能访问,关于我们页面不需要登录就能访问,都想在登录之后返回到之前的页面。

个人中心这种需要登录权限的页面,在全局的路由守卫里面加入里,在路由的元信息meta里面加上meta: { requireAuth:true},然后

router.beforeEach((to, from, next) => {
// NProgress.start()
// console.log(to.meta.requireAuth);
if (to.meta.requireAuth) { // 如果访问的页面必须要登录
    if (getToken()) {
        next(); /*  */
    } else {
        next({
            path: '/login',
            query: { redirect: to.fullPath }
        })
    }
} else {
    next();
}

})
但是这对不需要登录就可访问的页面没有用,就想着在else里面通过判断to.path==='login’来解决这个问题。。最后导致页面死循环了,经过大佬的指点后在login页面使用了守卫解决

  1. 先在login组件内定义一个变量:

然后在beforeRouteEnter里拿到上个路由的路径:


2.在登录请求完成之后跳转到上个页面


           

3.这其中又有些不需要登录的页面是不需要返回的,比如从注册跳转到登录页,登录完成之后应该回到首页而不是注册页,所以又增加了一个不需要返回的白名单,里面放入的是这些页面的路由路径。


``


   

你可能感兴趣的:(vue,项目经验)