Vue-Router:从“/”到“/login”时,在导航防护中检测到无限重定向

8ehkhllq  于 2023-04-07  发布在  Vue.js
关注(0)|答案(1)|浏览(1351)

我想阻止网页,如果没有身份验证令牌和重定向到登录页面。我有两个。ts页(主要和路由)
路线:

import { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
  {
    path: '/login/',
    name: 'Login',
    component: () => import('layouts/LoginLayout.vue')
  },

  {
    path: '/',
    component: () => import('layouts/DVRLayout.vue'),
    children: [
      { path: 'dashboard', component: () => import('pages/DashboardPage.vue') },
      { path: 'settings', component: () => import('pages/AppSettings.vue')},
    ],
  },

  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];
export default routes;

主要的

import {
  createMemoryHistory,
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from 'vue-router';

import routes from './routes';

export default route(function () {

  const Router = createRouter({ routes });
  
  Router.beforeResolve(async(to, from, next) => {
    if(!document.cookie){
      next('/login')
    } else {
      next('/')
    }

  })
  return Router;
});

在加载页面地址是localhost/#/,然后它立即尝试重定向到/login和错误出现:

  • [Warning] [Vue Router warn]:从“/”到“/login”时,在导航防护中检测到无限重定向。正在中止以避免堆栈溢出。如果不修复,将在生产中中断。(vue-router.js,第43行)

启动路由器时出现意外错误:错误:无限重定向在导航后卫(匿名函数)- vue-router.mjs:3178*

disho6za

disho6za1#

Router.beforeResolve在每次导航之前运行,即使导航是由guard本身发起的。第一次重定向到/login会启动一个新的导航,因此guard再次激活,!document.cookie仍然为true,因此它再次重定向到/login,并永远重复。
else { next('/') }也可能不是你想要的。这意味着无论用户试图导航到哪里,只要!document.cookie为false,总是将他们引导到“/”。我认为你只是想调用next(),这意味着“继续当前导航,无论它在哪里”
试试看

Router.beforeResolve(async (to, from, next) => {
  if (!document.cookie && to.path !== '/login') {
    next('/login');
  } else {
    next();
  }
});

相关问题