Vue-router : Uncaught RangeError: 超过了最大调用堆栈大小

Question

我试图使用router.beforeEach()在每次转换之前检查一个条件，如果用户是否登录，如果不登录，我想把他重定向到登录页面。

 router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const currentUser = store.state.currentUser;

    if(requiresAuth && !currentUser) {
        next('/login');
    } else if(to.path == '/login' && currentUser) {
        next('/home');
    } else {
        next();
    }
});

但返回一个错误：Uncaught RangeError: Maximum call stack size exceededand this my route:

export const routes = [
{path: '/', component: Main ,meta: {requiresAuth: true},children:[
    {path: '/project', component: project , meta: {requiresAuth: true} },
    {path: '/calendrier', component: calendar, meta: {requiresAuth: true} },
    {path: '/setting', component: setting, meta: {requiresAuth: true} },
    {path: '/client', component: client, meta: {requiresAuth: true} },
    {path: '/detail/:id', name: detail , component: detail, meta: {requiresAuth: true} },
    {path: '/membre', component: membre, meta: {requiresAuth: true} },
    {path: '/test', component: test, meta: {requiresAuth: true} },
    {path: '/projectemploye' , component: projectemploye, meta: {requiresAuth: true} },
    {path: '/Chefprojet', component: chef, meta: {requiresAuth: true}},
    {path: '/client/:id' , component: clientdetail, meta: {requiresAuth: true} },
    {path: '*' , component:    require('./components/404.vue').default , meta: {requiresAuth: true}},
    {path: '/home' , component: home , meta: {requiresAuth: true}},
    {path: '/gantt/:id' , component: gantt, meta: {requiresAuth: true}},
    {path: '/reclamation' , component: reclamation, meta: {requiresAuth: true}},
    {path: '/detailleReclamation/:id' , component: DetailleReclamation, meta: {requiresAuth: true}},
    {path: '/profile/:id' , component: profile , meta: {requiresAuth: true}},
    {path: '/task/:id' , component: task, meta: {requiresAuth: true}},
    {path: '/taskdetail/:id' , component: taskdetail, meta: {requiresAuth: true} }
    ]
 },
{path: '/login', component: Login},


 ];

Answer 1

路由的路径是 *:

1. 不得是任何其他途径的子女
2. 必须是路由数组中的最后一个
3. 不得 requiresAuth: true 在其元数据中

根路径 / 不得 有 requiresAuth: true 的元数据中。

在您的情况下，不需要将所有路由都列为根路由的子路由。

如果您的所有路由都受到保护，而只有 /login 是公开的--那么最好把你的逻辑从正面换成负面。这意味着，与其把 requiresAuth: true 所有路线上，除 /login 你应该把 public: true 在 /login 而将所有其他路由的元数据留为空。

然后不检查 meta.requiresAuth 您将检查 !meta.public