全局（前置守卫）路由拦截实现登录判断

weixin_45912344

已于 2024-03-05 21:57:14 修改

阅读量538

点赞数 9

文章标签： java 服务器前端

于 2024-03-05 21:21:26 首次发布

本文链接：https://blog.csdn.net/weixin_45912344/article/details/136490104

版权

本文讲述了在Vue项目中使用VueRouter时遇到的Maximumcallstacksizeexceeded错误，作者分享了解决方案，即通过修改全局前置守卫逻辑，将重定向限制在白名单内，避免无限递归导致的堆栈溢出问题。

摘要由CSDN通过智能技术生成

踩坑记录！

学习就是要把每个细微的知识点都弄清楚，不然后面要花很多时间去解决

问题：

原代码：

// 处理权限相关信息
import router from "@/router";
import { getToken } from "@/composables/auth";
import { toast } from "./composables/util";

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const token = getToken();

  // 没有登录，强制跳转到登录页面
  if (!token && to.path != "/login") {
    toast("请先登录", "error");
    next({ path: "/login" });
    return;
  }
  //防止重复登录
  if (token && to.path == "/login") {
    toast("请无重复登录", "error");
    return next({ path: from.path ? from.path : "/" });
  }
});

错误解析

在路由中把重定向理解为默认路由

重定向：用户载访问A的时候，强制用户跳转带地址C从而展示特定的组件页面，简而言之就是指定一个新的地址

改正

把在路由里面设置的重定向取消

// 处理权限相关信息
import router from "@/router";
import { getToken } from "@/composables/auth";
import { toast } from "./composables/util";

// 设置哪些页面是属于白名单的
const witheList = ["/login"];

function isWitheRoute(path) {
  return witheList.includes(path);
}

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const token = getToken();
  // 判断如果是白名单就直接放行
  if (isWitheRoute(to.path)) {
    next();
    return;
  }
  // 没有登录，强制跳转到登录页面
  if (!token && to.path != "/login") {
    toast("请先登录", "error");
    next({ path: "/login" });
    return;
  }
  //防止重复登录
  if (token && to.path == "/login") {
    toast("请无重复登录", "error");
    return next({ path: from.path ? from.path : "/" });
  }
    next()
});

【Vue】Vue Router导航守卫报错：Maximum call stack size exceeded_router maximum call stack size exceeded-CSDN博客