Jeecg-Boot前端路由守卫：如何实现企业级权限控制与页面跳转拦截

Jeecg-Boot前端路由守卫：如何实现企业级权限控制与页面跳转拦截

【免费下载链接】jeecg-boot 项目地址: https://gitcode.com/gh_mirrors/jee/jeecg-boot

Jeecg-Boot作为一款优秀的企业级低代码开发平台，其前端路由守卫机制是实现权限控制与页面跳转拦截的核心技术。通过巧妙的路由守卫设计，Jeecg-Boot能够确保用户只能访问其拥有权限的页面，有效保护系统安全。本文将详细介绍Jeecg-Boot前端路由守卫的实现原理和配置方法。

🔐 什么是路由守卫？

路由守卫是Vue Router提供的一种导航守卫机制，它允许在路由跳转前、跳转后或组件渲染前执行特定的逻辑。在Jeecg-Boot中，路由守卫主要用于：

• 权限验证：检查用户是否有访问目标页面的权限
• 页面跳转拦截：在特定条件下阻止或重定向路由跳转
• 登录状态维护：确保未登录用户无法访问受保护页面
• 动态路由构建：根据用户权限动态生成可访问的路由

🛡️ Jeecg-Boot路由守卫架构

Jeecg-Boot的路由守卫系统采用模块化设计，主要包含以下几个核心守卫：

权限守卫（Permission Guard）

权限守卫是整个系统的核心，位于 [src/router/guard/permissionGuard.ts](https://link.gitcode.com/i/0fb5d54dfd5df0c1bfa6c151225a443e)，它负责：

• 白名单验证：检查目标路由是否在免登录白名单中
• Token验证：验证用户登录状态
• 动态路由构建：根据用户权限动态添加路由
• 页面跳转控制：处理登录后的重定向逻辑

状态守卫（State Guard）

状态守卫位于 [src/router/guard/stateGuard.ts](https://link.gitcode.com/i/32e100e8996adc9725bdf66a13eeba07)，主要功能：

• 登录状态清理：用户退出登录时清除所有状态
• 会话管理：确保系统状态的一致性

🚀 权限守卫实现详解

白名单机制

Jeecg-Boot定义了免登录白名单，包括登录页、OAuth2登录页等特殊页面：

const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH, SYS_FILES_PATH, TOKEN_LOGIN];

Token验证流程

当用户访问受保护页面时，权限守卫会执行以下验证流程：

1. 检查白名单：如果目标路由在白名单中，直接放行
2. Token检测：如果没有Token且不在白名单，跳转到登录页
3. 动态路由构建：首次访问时构建用户专属路由表

自定义首页跳转

系统支持用户自定义首页，当用户设置了个性化首页时，路由守卫会自动处理跳转逻辑：

if (homePathJumpCount < 1 && from.path === ROOT_PATH && to.path === PageEnum.BASE_HOME) {
  next(userStore.getUserInfo.homePath);
}

📋 配置路由守卫

守卫注册

在 [src/router/guard/index.ts](https://link.gitcode.com/i/78a8ded13cb60f54504d649418efc119) 中注册所有守卫：

export function setupRouterGuard(router: Router) {
  createPageGuard(router);
  createPageLoadingGuard(router);
  createHttpGuard(router);
  createScrollGuard(router);
  createMessageGuard(router);
  createPermissionGuard(router);
  createParamMenuGuard(router);
  createStateGuard(router);
}

🎯 实际应用场景

1. 登录状态拦截

当用户未登录时尝试访问受保护页面，系统会自动跳转到登录页面：

if (!token) {
  // 跳转到登录页
  next({ path: LOGIN_PATH, replace: true });
}

2. 权限页面控制

根据用户角色和权限，动态控制页面访问权限：

const routes = await permissionStore.buildRoutesAction();
routes.forEach((route) => {
  router.addRoute(route as unknown as RouteRecordRaw);
});

🔧 快速配置步骤

步骤1：定义页面枚举

在 [src/enums/pageEnum.ts](https://link.gitcode.com/i/228b44fb8cf966098b02c99414f41df5) 中配置基础页面路径：

export enum PageEnum {
  BASE_LOGIN = '/login',
  BASE_HOME = '/dashboard/analysis',
  OAUTH2_LOGIN_PAGE_PATH = '/oauth2-app/login'
}

步骤2：配置项目设置

在项目设置文件中配置路由守卫相关参数：

// 切换路由时关闭消息实例
closeMessageOnSwitch: true,
// 切换路由时移除所有待处理请求
removeAllHttpPending: true

💡 最佳实践建议

1. 合理设计白名单：确保登录、注册等公共页面在白名单中
2. Token安全存储：使用安全的Token存储机制
3. 错误处理完善：确保在各种异常情况下都能正确处理
4. 性能优化：避免不必要的权限验证影响用户体验

🎉 总结

Jeecg-Boot的前端路由守卫机制为企业级应用提供了强大的权限控制能力。通过合理的守卫配置，开发者可以轻松实现：

• ✅ 细粒度的页面访问控制
• ✅ 动态路由构建与权限匹配
• ✅ 安全的登录状态维护
• ✅ 灵活的白名单配置

通过本文的介绍，相信您已经了解了Jeecg-Boot路由守卫的核心原理和配置方法。在实际项目中，可以根据具体需求灵活调整守卫逻辑，构建更加安全可靠的前端权限控制系统。

【免费下载链接】jeecg-boot 项目地址: https://gitcode.com/gh_mirrors/jee/jeecg-boot