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

如果有人仍在寻找答案，则可以颠倒逻辑。因此，与使用requireAuth一样，您将拥有针对经过身份验证的用户的隐藏路由。（以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();
        }
    });
});

Answer 2

这就是我在做什么。首先，我为路由使用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 3

除了Andrey的答案外，如果您使用Firebase身份验证，还需要在main.ts中的createApp周围添加onAuthStateChanged。

firebase.auth().onAuthStateChanged((user) => {
  createApp(App).use(store).use(router).mount('#app')
})

Answer 4

// requireAuth for those you want to authenticate 
// onlyGuest for  those you don't want to autenticate to open other thing if already 
//   logged in then it's redirect to home

 router.beforeEach((to,from,next)=>{
  if(to.matched.some(record => record.meta.requireAuth)){

    if(!store.state.loginUser){
      next({name:'Login'});
    }
    else{
      next();
    }
 }
else if (to.matched.some(record => record.meta.onlyGuest)) {

    if (store.state.loginUser && store.state.loginUser.token) {
        next({name: "Home"});
    } else {
        next();
    }
}
else{
  next();
}
 });

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

4 个答案: