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);
            });
    }
});

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

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

原文由 kodfire 发布，翻译遵循 CC BY-SA 4.0 许可协议

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“不需要身份验证”列表的一部分，并进行另一个调用:)

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

祝你好运！

原文由 Andrey Popov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

在你的 beforeEeach 中

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();
        }
    });
});

原文由 el_even 发布，翻译遵循 CC BY-SA 4.0 许可协议