需求：需要根据不用的用户匹配不同的管理权限，既：匹配不同的操作导航，尤其体现在后台管理系统内，如果仅仅只是在导航菜单内不予显示，仍然是可以通过路径直接打开页面，因为其路由信息已经在路由信息对象(new Router({}))函数中进行了注册
当然 这里可以通过全局导航守卫来区分不同的用户，允许其进入不同的路径，但是这只能进行简单的权限判断，且前端已经写死，灵活性不高，不能针对每个用户，做定制化权限区分
项目地址：github.com/cgq001/vue-…
欢迎star, 留着也许就用到了，毕竟权限管理 还是很普遍的嘛
使用到的规则
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:{title: '首页',table: true,display: false,icon: 'el-icon-s-home'}},{id: 2,path: '/index', name: 'index',label: '首页',component: _import('Index/Index'),meta:{title: '首页',table: true,display:true,icon: 'el-icon-s-home'}},{id: 3,path: '/shop',name: 'shop',label: '商品管理',component: _import('Shop/Shop'),meta:{title: '商品列表',table: true,display:true,icon: 'el-icon-s-operation'}},{id:20,path: '/admin',label: '管理员列表',component: _import('admin/index'),meta:{title: '管理员列表',table: true,display:true,icon: 'el-icon-s-custom'},children:[{id:21,path: '/admin/index',label: '管理员列表',component: _import('admin/admin'),meta:{title: '管理员列表',table: true,display:true,icon:'el-icon-tickets'}},{id:22,path: '/admin/adminlist',label: '添加管理员',component: _import('admin/adminlist'),meta:{title: '添加管理员',table: true,display:true,icon:'el-icon-document-remove'}}]}
]//定义 上面数组的父路由
let routerAlls=[ //这里为routerLists的父路由{path: '/',component: Home}
]1 .权限配置表
// 先把路由信息对象字符串化，然后去除component字段 ，再传递给 权限配置表let routerListString =JSON.stringify(routerLists)let src= routerListStr(routerListString)store.commit('serRouterList',src)let arr=[1,2,3,20,21,22] //这里为权限列表数组(既后台根据用户身份返回的对应的路由数组)//根据权限配置表(arr数组)和动态路由信息对象(routerLists数组) 获取本用户的路由信息表，并添加到 routerAlls 路由的二级路由里2.获取动态路由routerAlls[0].children = routerListFun(arr,routerLists)
//获取 路径 '/' 的子路由，并添加至 routerAlls 这里的 routerListFun函数 为 根据权限列表数组（arr）筛选动态路由信息对象（routerLists） PS：函数内容见 文章末尾：附录3.获取侧边导航栏 的 渲染菜单 数组//根据权限配置表数组（arr）和动态路由信息对象（routerLists） 获取本用户的菜单列表
let mentParse =JSON.parse(JSON.stringify(src))
let menuList = routerListFun(arr,mentParse) //这里routerListFun函数注意去除返回数组中的component
store.commit('setMents',menuList) //将其添加到vuex // 注册路由
let routers =new Router({mode: 'history',// base: process.env.BASE_URL,routes: [{path: '/loading',name: 'loading',component: () => import('../views/Load/Loading.vue'),meta:{title: '登陆',table: false}}]
})// 将筛选后的路由信息对象添加至路由表
routers.addRoutes(routerAlls)// 进行全局导航守卫
routers.beforeEach((to,from,next)=>{if(to.path != '/loading'){let username=store.state.load.userList.usernameif(username){next()}else{next({path:'/loading',query:{path:to.path}}) }}else{next()}
})export default routers;
复制代码
附录
1.动态路由书写规则
* 路由书写规则* 1、只有一级路由（实际为二级路由）：* {id: 2, //ID全局不能重复path: '/index', //路由路径 全局不能重复name: 'index', //名字，全局不能重复，存在二级路由，则一级路由不能有名字label: '首页', // 页面名称(用于权限配置时 显示名称使用)component: _import('Index/Index'), // 文件地址（此处对应的是views目录）meta:{title: '首页', //页面名称（横向teble标签切换）table: true, // 是否显示 teable 切换按钮display:true, // 是否在侧边导航菜单显示icon: 'el-icon-s-home' // 侧边导航的icon图标}}2、包含二级路由（实际为三级路由）{id:20, //ID全局不能重复path: '/admin', //路由路径 全局不能重复(此处为父级))label: '管理员列表', // 页面名称(用于权限配置时 显示名称使用)component: _import('admin/index'), // 文件地址（此处对应的是views目录）注意：此文件下 应包含（router-view 标签 来显示子页面）meta:{title: '管理员列表', //页面名称（横向teble标签切换）table: true,display:true, // 是否在侧边导航菜单显示(注意 这里是父级，如果为false,则子级不在折叠)### 总结秋招即将开始，校招的朋友普遍是缺少项目经历的，所以**底层逻辑，基础知识要掌握好！**而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 **HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法**等高频考点**238道（含答案）**！ 资料截图 ：**高级前端工程师必备资料包** 
