前言
在看本篇文章之前首先要了解熟悉vue-admin-template模板。
什么是vue-admin-template？
这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
权限控制的改造
我们按照vue-admin-template官网运行代码会看到以下页面
由于没有写后端接口，我们全权用项目中的mock，模拟后端接口请求，我们在mock文件夹下的user.js会看到系统设置了两个登陆人，一个admin，一个editor，我们模拟添加一个新的用户limm
添加完用户之后，我们就要想，动态权限分配，就是我们用不同的角色登陆，会有不同的菜单。比如系统管理员，会有人员管理的权限、业务管理员，会有业务管理的权限。
首先我们得研究一下页面中登陆之后菜单的显示
我们在这个层级目录下
看到菜单是根据路由取循环出来的
看到这里，大概思路就出来了，假设我登陆不同的角色，能够获得到不同的路由，这样不就实现动态权限的管理了。要想实现动态路由，我们只需要实现路由是在登陆之后请求到的，这样的话，实际开发中，我们只需要在登录之后调用后端接口，给后端传送过去roleId，后端反不同路由过来，就行了，实际需要动态的路由我们存储在数据库中，至于后端的逻辑，只需要后端根据你传送的不同角色，或者后端从session中取到用户信息，给你返回不同的路由就行。
这里我比较懒，也就没有新建页面，直接拿router.js中的form的路由去掉
页面菜单显示
此时页面显示缺少form，我们把form作为动态路由添加进来。我们观察到路由共有的元素有：
path， component，name，meta，children这五个元素所以我们就mock按照注释掉form路由定义的路由去造一下数据，代码我粘贴如下：
const Mock = require('mockjs')
const data = Mock.mock({
'dataList': [{
path: '/form',
component: 'Layout',
name:'Corm',
meta:{},
children: [{
path: 'index',
name: 'Form',
component: '/form/index',
meta: {
title: 'Form',
icon: 'form'
},
children:null
}]
}]
})
module.exports = [
{
url: '/vue-admin-template/router/list',
type: 'get',
response: config => {
const items = data.dataList
return {
code: 20000,
data: {
total: items.length,
dataList: items
}
}
}
}
]
然后我们在store/modules/user添加state.routerList，我们将获取的动态路由存储在store中。
api/user：
登陆之后，在permission.js中调用获取动态路由
const menus = filterAsyncRouter(store.getters.routerList) // 1.过滤路由
router.addRoutes(menus) // 2.动态添加路由
global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
_import方法：
在router文件夹下创建文件：
根据不同的环境引用
注意事项：
后端返回的children中的component与组件中的文件夹和文件名一直，这样在_import方法中才能引用的到，否则会报错。Layout组件以字符串返回在filterAsyncRouter方法中会做出映射。
以上是全部动态路由权限的介绍，如果有不清楚的，代码已经传到码云上：https://gitee.com/jackmingming/vue-demo，欢迎大家参考。
手写不易，希望大家给个关注，给个赞！谢谢！
