前端路由权限控制方案一般有两种
- 动态路由
- 全量路由 +后端权限
动态路由
如果对代码体积或功能保密性要求高，也可以采用“动态添加路由”方案：
- 前端只保留登录页、404 等静态路由。
- 登录后，根据权限，向后端请求当前用户的路由配置（路由路径、组件路径、权限等）。
- 前端拿到后，动态解析并调用
router.addRoute()添加。 - 菜单也根据这个动态数据直接生成。
全量路由
- 加载路由：前端初始化时，就加载定义好的所有路由（静态路由+所有动态业务路由）。
- 获取权限：用户登录后，立即请求后端接口，获取其权限列表，比如
['user:add', 'order:view', 'report:export']。 - 动态生成菜单：前端根据权限列表，递归过滤路由配置，只留下有权限的路由来渲染侧边栏菜单。
- 注册全部路由：关键在于，所有路由其实都已经注册到路由实例中了。这才能让你在路由守卫里判断权限时，直接匹配到目标路由并检查其所需权限。
- 路由守卫拦截：在每次跳转前，检查目标路由是否需要特定权限。如果需要，就验证用户是否有该权限；如果没有，就跳转到 403 页面。