vue3 角色权限动态路由

Vue3中的角色权限动态路由是一种常见的前端管理功能，它允许系统根据用户的角色或权限来动态生成和配置路由。这种技术通常结合了Vuex（状态管理库）和`@vue-router`（路由管理库）。以下是实现过程的一个简要概述：

1. **设置基础路由**：首先，在项目中定义基础路由，它们是所有用户都能访问的基本页面。

2. **定义动态数据**：在Vuex store中创建一个表示角色权限的数据结构，如一个映射，其中键是角色名，值是该角色对应的路由权限数组。

3. **守卫函数**：使用Vue Router的`beforeEach`守卫，检查当前用户的权限，然后根据其角色从store中获取相应的权限数组，动态生成可访问的路由。

import { useRouter } from 'vue-router'
// ...在store中获取用户角色和权限
router.beforeEach((to, from, next) => {
  const userRole = getUserRole() // 获取用户角色
  if (hasPermission(userRole, to.meta.requires)) { // 检查用户是否有访问此路由的权限
    next()
  } else {
    next({ path: '/unauthorized', name: 'Unauthorized' }) // 跳转到无权限页面
  }
})

4. **权限判断**：在路由元信息`meta`中包含需要的权限，可以是一个字符串数组或一个自定义的对象，用于描述所需的权限组合。

5. **组件内访问权限**：如果你还想在单个组件内部控制访问权限，可以使用`canActivate`生命周期钩子或者`@authorize`指令。