和我一起解刨基于Vue2.0+Vuex+element-ui的后台管理(三)之如何由进行动态路由分配

Target&StepThree——如何由进行动态路由分配

我是基于原项目进行修改的，可以Start我的仓库,相关笔记和代码都会实时更新的。点击这里

本项目路由是动态的，因为我们项目用户可以进行添加页面，这样页面不断的迭代更新，前端每次都要提交代码给后端，着实有点麻烦，所以我们可以提供根据用户的动态路由表进行动态渲染页面。

• 这里的路由分为两种，constantRoutes 和 asyncRoutes。

constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。

asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。

1. 解决跨域问题

2. 多个环境变量

   官网环境变量的解释

3. 封住工具包

• 这时候就要讨论上一篇中路由挂载的第二，三步的实现

1. 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。(遍历过滤判断roles字段是否有我们那个角色)
2. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。

首先我们在@/permission中在获取用户信息以后利用store的 const accessRoutes = await store.dispatch('permission/generateRoutes', roles)装向发起get请求获取菜单

检查路由表的roles字段时候有你自己的roles，有就添加，另外这里是嵌套路由，有分等级路由，所以会采用递归搜索。(不会有人不知道递归吧)

最后将可查看的路由加入白名单(侧边栏通过读取白名单动态生成)

对于侧边栏如何读取路由并结合权限判断而动态生成的？后面我们慢慢探索，好奇的朋友可以点击

官网-侧边栏