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 相同的方式，您将为经过身份验证的用户提供隐藏路由。(以火力基地为例(

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

而在你之前

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 3

源自波波夫@Andrey答案。

我更喜欢明确禁止不需要身份验证的路由。这可以防止意外不保护您的路由，即默认情况是重定向到登录页面

router.beforeEach((to, from, next) => {
if (to.name === 'login') {
next() // login route is always  okay (we could use the requires auth flag below). prevent a redirect loop
} else if (to.meta && to.meta.requiresAuth === false) {
next() // requires auth is explicitly set to false
} else if (store.getters.isLoggedIn) {
next() // i'm logged in. carry on
} else {
next({ name: 'login' }) // always put your redirect as the default case
}
})

Answer 4

除了 Andrey 的答案之外，如果您使用 firebase 身份验证，则需要在 main.ts 中添加 onAuthStateChanged about createApp。

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

Answer 5

这是非常基本的概念，使用redirect:'/dashboard'你可以这样做。 您必须在路由列表中定义它。 喜欢这样。 您可以忽略mate: {}. 我将其用于不同的目的。

routes: [ ....
{
path: '/login',
name: 'login',
component: LoginView,
meta:{needAuth:false},
redirect:'/dashboard'
},
{
path: '/sign-up',
name: 'sign-up',
component: SignUpView,
meta:{needAuth:false},
redirect:'/dashboard'
},
{
path: '/dashboard',
name: 'dashboard',
component: UserDashboard,
meta:{needAuth:true},
beforeEnter: ifAuthenticated,
}
]

function ifAuthenticated  (to, from, next)  {  store.test();
if (localStorage.getItem("login-token")) { console.log("login done");
next(); 
return;
}
router.push({  name: 'login' });
};

Answer 6

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