Vue路由器：未捕获的RangeError：超出最大调用堆栈大小答案

【问题标题】：Vue-router : Uncaught RangeError: Maximum call stack size exceededVue路由器：未捕获的RangeError：超出最大调用堆栈大小
【发布时间】：2020-05-10 11:15:06
【问题描述】：

我正在尝试使用 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();
    }
});

但返回错误：未捕获的 RangeError：超出最大调用堆栈大小这是我的路线：

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},


 ];

【问题讨论】：

标签： vue.js vuejs2 vuex vue-router

【解决方案1】：

路径为*的路由：

不得是任何其他路线的子路线
必须在路由数组的最后一个
元数据中不得包含requiresAuth: true

根路由/ 不得在其元数据中包含requiresAuth: true。

在您的情况下，无需将所有路由列为根路由的子级。

如果您的所有路由都受到保护并且只有 /login 是公开的 - 那么最好将您的逻辑从正面切换到负面。这意味着与其将requiresAuth: true 放在除/login 之外的所有路由上，不如将public: true 放在/login 中，并将所有其他路由保留为空的元数据。

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

【讨论】：