Vue路由器不重定向答案

【问题标题】：Vue Router does not redirectVue路由器不重定向
【发布时间】：2018-02-08 09:14:04
【问题描述】：

如果用户已登录，我目前正在尝试仅显示页面。我面临的问题是 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'
});

testing 在我收到错误之前输出了大约 1000 次：

[vue-router] 路由导航期间未捕获的错误：警告@app.js

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

如果!localStorage.token，我如何确保/login 被重定向到？

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

我遇到了同样的问题，因为各个错误的来源都归结为 next() 函数，这是导航到以 to.path 为值的路径所必需的。如果您将使用router.push 或router.replace，那么当调用堆栈最大错误显示时，可能会被无限次调用。所以简单使用next()，让router API 做繁琐的工作

我做过这种事情，但方式不同。我处理了main.js 文件中的所有逻辑。并且routes.js 文件包含 -

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

现在我已经使用vue-router API 控制了 main.js 文件中的所有类型的验证，因为它可以从中获得帮助 - https://router.vuejs.org/en/api/route-object.html

所以现在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离开所有东西

【讨论】：

【解决方案2】：

如果您没有 localStorage 令牌，则您正在将用户重定向到 /login。

因为这也是一条 Vue 路由，所以您的 requireAuth 逻辑将再次运行（因为它为每条路由运行）。这意味着您刚刚创建了一个无限循环，即使用户已经在该页面上，用户也会不断被重定向到/login。

要阻止这种情况，请不要在您已经在 /login 上时重定向到 /login。

我会把这部分留给你，但如果你明白发生了什么，应该不会那么难。

【讨论】：