Javascript Vue路由器不重定向

如果用户已登录，我当前仅尝试显示页面。我面临的问题是，

requireAuth（）

似乎被调用了无数次

使用的代码是：

// Routes
const routes = [
    {
        path: '/',
        component: Dashboard,
        beforeEnter: (to, from, next) => {
            requireAuth(to, from, next);
        },
        children: [
            {
                path: '',
                name: 'dashboard',
                component: DashboardIndex
            }, {
                path: '*',
                name: '404',
                component: NotFound
            }
        ]
    },  {
        path: '/login',
        component: Login,
        name: 'login',
    },
];

function requireAuth (to, from, next) {
    if (!localStorage.token) {
        console.log('testing');
        next({
            path: '/login',
            query: { redirect: to.fullPath }
        })
    } else {
        next()
    }
}

// Routing logic
let router = new VueRouter({
    routes: routes,
    mode: 'hash'
});

在我收到错误之前，

测试

输出约1000次：

[vue路由器]在路由导航过程中出现未捕获错误： 警告@app.js

app.js RangeError:超过最大调用堆栈大小

---

如何确保将

/login

重定向到if

！localStorage.token

？

如果您没有

localStorage

令牌，则您正在将用户重定向到

/login

因为这也是一个Vue路由，所以您的requireAuth逻辑将再次运行（因为它针对每个路由运行）。这意味着您刚刚创建了一个无限循环，用户将不断被重定向到

/login

，即使用户已经在该页面上

要停止此操作，只需在您已处于

/login

状态时，不要重定向到

/login

---

我将把这部分留给您，但如果您理解发生了什么，这应该不会那么困难。

我面临着同样的问题，因为各个错误的源都归结为

next（）

函数，它是导航到路径所必需的，该路径的值为

to.path

。如果您要使用

路由器。按

或

路由器。替换

，则可能会在callstack max error显示时被调用无数次。因此，只需使用

next（）

，就可以让

router

API完成繁琐的工作

我做过这类事情，但方式不同。我处理了

main.js

文件中的所有逻辑。和

routes.js

文件包含-

var routes = [{
  path:'/login', 
  component: Login
 },
 { 
  path:'/',
  component: dashboard
 }]

现在，我已经使用

vue router

API控制了main.js文件中的所有类型的验证，并从以下方面获得了帮助-

所以现在

main.js

将包含-

  const checkToken = () => {
    if(localStorage.getItem('token') == (null || undefined) ){
        console.log('token is not there : ' + localStorage.getItem('token'));
        return false;
    }
    else{
        return true
    }
    }


//then Use `router.push('/login')` as

router.beforeEach((to, from, next) => {
  if(to.path == '/') {
    if(checkToken()) { 
        console.log('There is a token, resume. (' + to.path + ')' + 'localstorage token ' + localStorage.getItem("token"));
        next();

    } else {
        console.log('There is no token, redirect to login. (' + to.path + ')');
        router.push('/login');
    }
}

因此，您可以像这样构造，控制

main.js

中的所有内容，并将

route.js

置于所有内容之外