【Vue router】动态路由匹配下的权限处理

[z0ffy]

基于路由的访问控制（Route-Based Access Control）

前端 routes.js 中定义完整路由，每个路由 meta 信息中的 role 来标识权限值。登陆之后通过用户的权限过滤完整路由，最终生成用户路由。

特点

• 集中管理：在 routes.js 中集中管理所有路由及其权限信息。
• 动态生成用户路由：用户登录时根据权限动态过滤路由，生成符合用户权限的路由配置。
• 基于角色的访问控制：通过 meta.role 来管理和控制角色权限，可以支持多角色的访问权限需求。

流程

• 定义完整路由表：在 routes.js 中定义所有路由和对应的 meta.role 信息。
• 用户登录后获取权限：用户登录后，获取用户权限信息（如角色、权限 ID 等）。
• 动态过滤路由：根据用户的权限信息过滤完整路由表，生成仅包含用户有权限访问的路由。
• 动态注入路由表：将过滤后的路由表动态注入到路由配置中。

业务背景

基于上述流程。在实际业务中，如果用户进入无匹配路由页面时（实际路由确实不存在、权限不足导致无匹配路由），会重定向至 404
页面（此动作由 vue-router 的 路由匹配完成）。

捕获所有路由或 404 Not found 路由

// 需在用户路由表生成后添加
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: '/404',
};

问题

通过以上操作，一旦匹配不到路由就会重定向至 404 页面。此时无法区分进入 404 的原因到底是因为 实际路由不存在 还是 **权限不足
**
**。

解决方案

为了解决上述问题可以修改 NotFound 中的 redirect 如下:

const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: (to) => {
    console.log(to);
    return '/404';
  },
};

在将 redirect 配置项设置为方法后：

1. 参数 to：可以访问跳转前的路由信息，帮助了解用户试图访问的路径。
2. 方法 router.getRoutes：可以获取所有已注册的路由表，便于进行权限和路径验证。

在此基础上，需要实现以下两重判断：

1. 路径存在性判断：利用 to.path 检查目标路径是否在路由表中。
   • 若路径存在：说明目标路径已注册。（可忽略。进一步判断用户是否有权限访问。此时，如果用户跳转到了 404
     页面，通常意味着当前用户没有访问该路径的权限。）
   • 若路径不存在：说明路由没有进行注册。
2. 增加标记：可以通过修改 to.query 或其他方式，标记跳转到 404 的原因，便于前端展示不同的提示内容。

通过这种判断，能够精准地确认跳转至 404 的原因，进一步支持前端展示出更具体的权限提示信息。