Target&StepThree——如何由进行动态路由分配
我是基于原项目进行修改的,可以Start我的仓库,相关笔记和代码都会实时更新的。点击这里
本项目路由是动态的,因为我们项目用户可以进行添加页面,这样页面不断的迭代更新,前端每次都要提交代码给后端,着实有点麻烦,所以我们可以提供根据用户的动态路由表进行动态渲染页面。
- 这里的路由分为两种,
constantRoutes
和asyncRoutes
。
constantRoutes: 代表那些不需要动态判断权限的路由,如登录页、404、等通用页面。
asyncRoutes: 代表那些需求动态判断权限并通过 addRoutes
动态添加的页面。
-
解决跨域问题
-
多个环境变量
-
封住工具包
- 这时候就要讨论上一篇中路由挂载的第二,三步的实现
- 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。(遍历过滤判断roles字段是否有我们那个角色)
- 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
首先我们在@/permission中在获取用户信息以后利用store的 const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
装向发起get请求获取菜单
检查路由表的roles字段时候有你自己的roles,有就添加,另外这里是嵌套路由,有分等级路由,所以会采用递归搜索。(不会有人不知道递归吧)
最后将可查看的路由加入白名单(侧边栏通过读取白名单动态生成)
对于侧边栏如何读取路由并结合权限判断而动态生成的?后面我们慢慢探索,好奇的朋友可以点击