vuejs - 如果已经登录，则从登录/注册重定向到主页，如果未在 vue-router 中登录，则从其他页面重定向到登录

Question

如果登录，我想将用户重定向到主页，并希望访问登录/注册页面，如果未登录，我想将用户重定向到登录页面并希望访问其他页面。有些页面被排除在外，这意味着不需要登录，所以我的代码就在下面：

router.beforeEach((to, from, next) => {
    if(
        to.name == 'About' ||
        to.name == 'ContactUs' ||
        to.name == 'Terms'
    )
    {
        next();
    }
    else
    {
        axios.get('/already-loggedin')
            .then(response => {
                // response.data is true or false
                if(response.data)
                {
                    if(to.name == 'Login' || to.name == 'Register')
                    {
                        next({name: 'Home'});
                    }
                    else
                    {
                        next();
                    }
                }
                else
                {
                    next({name: 'Login'});
                }
            })
            .catch(error => {
                // console.log(error);
            });
    }
});

但问题是它进入了一个无限循环，例如每次登录页面加载而用户未登录时，它会将用户重定向到登录页面，然后再次重定向到登录页面，然后......

我怎样才能解决这个问题？

Answer 1

这就是我正在做的。首先，我使用meta路由数据，所以我不需要手动放置所有不需要登录的路由：

routes: [
  {
    name: 'About' // + path, component, etc
  },
  {
    name: 'Dashboard', // + path, component, etc
    meta: {
      requiresAuth: true
    }
  }
]

然后，我有一个这样的全球卫士：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!store.getters.isLoggedIn) {
      next({ name: 'Login' })
    } else {
      next() // go to wherever I'm going
    }
  } else {
    next() // does not require auth, make sure to always call next()!
  }
})

在这里，我存储用户是否登录，并且不发出新请求。

在您的示例中，您忘记将Login“不需要身份验证”的页面包含在列表中。因此，如果用户试图去让我们说Dashboard，你提出请求，结果他没有登录。然后他去Login，但你的代码检查，看到它不是 3 个“不需要身份验证”列表的一部分，并让另一个电话:)

因此跳过这个“列表”是至关重要的！;)

祝你好运！

Answer 2

如果有人仍在寻找答案，您可以颠倒逻辑。因此，与使用 requiresAuth 的方式相同，您将为经过身份验证的用户设置隐藏的路由。（以firebase为例）

    routes: [{
            path: '/',
            redirect: '/login',
            meta: {
                hideForAuth: true
            }
        },
         {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                requiresAuth: true
            }
        }]

而在你之前Eeach

router.beforeEach((to, from, next) => {
    firebase.auth().onAuthStateChanged(function(user) {
        if (to.matched.some(record => record.meta.requiresAuth)) {
            if (!user) {
                next({ path: '/login' });
            } else {
                next();
            }

        } else {
            next();
        }

        if (to.matched.some(record => record.meta.hideForAuth)) {
            if (user) {
                next({ path: '/dashboard' });
            } else {
                next();
            }
        } else {
            next();
        }
    });
});