基于角色的权限控制

路由设计方案

第一种：全注册

把所有路由的路径都注册好，不管角色。角色只是控制哪个菜单需要显示

弊端：用户可以通过在浏览器输入url，进入对应的页面，尽管她可能没有这个菜单显示

解决：可以通过路由守卫，跳转前，判断这个用户要跳转的页面，是否符合她的角色

第二种：按角色注册好

就是先在前端代码中，写好各个角色对应的路由，用户登录时判断用户角色，然后加载对应的路由

弊端：不好修改，如果需求是增加新角色，你得改代码，重新打包发布上线

第三种：动态生成路由（推荐）

生成path和组件的关系

require.context 是 webpack 的一个函数

vite下可以通过 Glob 导入，读取本地文件，为：

const allRouters:RouteRecordRaw[] = []
const routerFiles = import.meta.glob('/src/router/**/*.ts')
for (const path in routerFiles) {
  // 获取文件模块里面的路径path
  routerFiles[path]().then((mod) => {
    console.log(mod)
    if (mod.default.component) {
      allRouters.push(mod.default)
    }
  })
}