Question

↓错误信息

Uncaught (in promise) Error: Infinite redirect in navigation guard　at eval

↓main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store'
import firebase from 'firebase';
import config from './firebase.config';

firebase.initializeApp(config);

const app = createApp(App); app.use(router); app.use(store); app.mount('#app');

router.beforeEach((to, from, next) => {
    if (to.path === '/home') {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                next('/home')
            } else {
                next('/')
            }
        })
    } else {
        next();
    } });

↓router.js

import { createRouter, createWebHistory } from 'vue-router';
import Login from './components/Login';
import SignUp from './components/SignUp';
import Home from './components/Home';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: Login }, //Login screen path
        { path: '/signup', component: SignUp }, //New registration screen path
        { path: '/home', component: Home }, //Screen path after login
    ],
});

export default router;

如上所述，我尝试编写自己的代码，但效果不佳。最好准备一个单独的标志而不是用 onAuthStateChanged 来检查用户信息吗？如果你能教我，我将不胜感激?‍♂️

Answer 1

将 next('/home') 更改为 next()

原因：如果你使用next('/home')，下面的代码将再次运行并无限循环

router.beforeEach((to, from, next) => {
    if (to.path === '/home') {
// this would be running again
...

}

当我未登录时登录后尝试访问屏幕时，我想重定向到登录屏幕

1 个答案: