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

最新推荐文章于 2024-09-09 00:12:40 发布

原创最新推荐文章于 2024-09-09 00:12:40 发布 · 7.6k 阅读

9 ·

CC 4.0 BY-SA版权

项目经验同时被 2 个专栏收录

38 篇文章

订阅专栏

vue

28 篇文章

订阅专栏

本文探讨了在前端项目中实现登录后返回上一页面的策略，详细讲解了如何利用路由守卫和组件内守卫避免页面死循环，同时介绍了设置白名单以排除特定页面的方法。

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

个人中心这种需要登录权限的页面，在全局的路由守卫里面加入里，在路由的元信息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页面使用了守卫解决

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

<script>
let redirectUrl;
 export default{
 }
</script>

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

<script>
    let redirectUrl;
    export default {
        beforeRouteEnter(to, from, next) {
            redirectUrl = from.fullPath;
            next(); // 这个不写的话无法显示login页面
       }
    }
  </script>

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

<script>
  let redirectUrl;
  export default {
        beforeRouteEnter(to, from, next) {
            if (to.query && to.query.redirect) {
                redirectUrl = to.query.redirect
            } else {
                redirectUrl = from.fullPath
            }
            next(); // 这个不写的话无法显示login页面
       },
        methods:{
             login() {
                  setToken('admin');
                  this.$router.push(redirectUrl);
              }
        }
  }
  </script>

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

<script>
  let redirectUrl;
  const whiteList = ['/login', '/register', '/retrieve-password/index', '/retrieve-password/next', '/retrieve-password/retrieved'] // 不重定向白名单
  export default {
        beforeRouteEnter(to, from, next) {
            redirectUrl = from.fullPath;
            next(); // 这个不写的话无法显示login页面
       },
        methods:{
             login() {
                  setToken('admin');
                   let url = whiteList.indexOf(redirectUrl) === -1 ? redirectUrl : '/';
                   this.$router.push(url);
              }
        }
  }
  </script>
``