vue根据不同权限显示图片_vue+element-ui实现动态的权限管理和菜单渲染

前言：

需求：需要根据不用的用户匹配不同的管理权限，既：匹配不同的操作导航，尤其体现在后台管理系统内，如果仅仅只是在导航菜单内不予显示，仍然是可以通过路径直接打开页面，因为其路由信息已经在路由信息对象(new Router({}))函数中进行了注册

当然 这里可以通过全局导航守卫来区分不同的用户，允许其进入不同的路径，但是这只能进行简单的权限判断，且前端已经写死，灵活性不高，不能针对每个用户，做定制化权限区分

欢迎start

使用到的规则

1、动态设置权限的UI展示

这里使用element-ui的Three树形控件,数据结构如下：

data: [{

id: 1,

label: '一级 1',

children: [{

id: 4,

label: '二级 1-1',

children: [{

id: 9,

label: '三级 1-1-1'

}, {

id: 10,

label: '三级 1-1-2'

}]

}]

}, {

id: 2,

label: '一级 2',

children: [{

id: 5,

label: '二级 2-1'

}, {

id: 6,

label: '二级 2-2'

}]

}, {

id: 3,

label: '一级 3',

children: [{

id: 7,

label: '二级 3-1'

}, {

id: 8,

label: '二级 3-2'

}]

}]

这里选择这个树形控件，是因为其数据结构和我们的 注册路由信息结构十分接近，不需要再重新修改路由信息的数据结构，即可完美的 展现在 Three树形控件里

2、将侧边导航所需要的路由信息对象 抽离成一个数组，根据后台返回的数组，筛选出对应的路由信息，通过addRoutes添加到路由信息对象里，即可完成路由信息的动态添加

详情

// 在router.js 路由文件 新建数组路由存储 '/' 父路由下的所有子路由(这里所有的动态路由均为 '/' 的子路由)

let routerLists=[

{

id:1,

path: '',

label: '首页',

redirect: '/index', //重定向到

meta:{

ti