权限管理
角色:一家企业而言：BOSS、运维、销售、程序员
权限:超级管理员（BOSS），是有权利操作整个项目的所有的模块
test（新媒体），只能首页、商品管理者一部分菜单数据
admin：超级管理员-----boss
权限管理：用户管理、角色管理、菜单管理
由于用户管理、角色管理、菜单管理：对于获取数据、展示数据、收集数据
首先搭建权限管理的静态界面
然后去路由当中去配置权限
export const asyncRoutes = [
{
name: 'Acl',
path: '/acl',
component: Layout,
redirect: '/acl/user/list',
meta: {
title: '权限管理',
icon: 'el-icon-lock'
},
children: [
{
name: 'User',
path: 'user/list',
component: () => import('@/views/acl/user/list'),
meta: {
title: '用户管理',
},
},
{
name: 'Role',
path: 'role/list',
component: () => import('@/views/acl/role/list'),
meta: {
title: '角色管理',
},
},
{
name: 'RoleAuth',
path: 'role/auth/:id',
component: () => import('@/views/acl/role/roleAuth'),
meta: {
activeMenu: '/acl/role/list',
title: '角色授权',
},
hidden: true,
},
{
name: 'Permission',
path: 'permission/list',
component: () => import('@/views/acl/permission/list'),
meta: {
title: '菜单管理',
},
},
]
},
{
path: '/product',
component: Layout,
name: 'Product',
meta: { title: '商品管理', icon: 'el-icon-goods' },
children: [
{
path: 'trademark',
name: 'TradeMark',
component: () => import('@/views/product/tradeMark'),
meta: { title: '品牌管理' }
},
{
path: 'attr',
name: 'Attr',
component: () => import('@/views/product/Attr'),
meta: { title: '平台属性管理' }
},
{
path: 'spu',
name: 'Spu',
component: () => import('@/views/product/Spu'),
meta: { title: 'Spu管理' }
},
{
path: 'sku',
name: 'Sku',
component: () => import('@/views/product/Sku'),
meta: { title: 'Sku管理' }
},
]
},
{
path: '/test',
component: Layout,
name: 'Test',
meta: { title: '测试管理', icon: 'el-icon-goods' },
children: [
{
path: 'test1',
name: 'Test1',
component: () => import('@/views/Test/Test1'),
meta: { title: '测试管理1' }
},
{
path: 'test2',
name: 'Test2',
component: () => import('@/views/Test/Test2'),
meta: { title: '测试管理2' }
},
]
},
];
然后就是相关权限的请求
这里有一个问题，那就是路由的配置，为什么不同用户登录我们的项目，菜单（路由都是一样的）
因为目前的路由是死的，不管你是谁，看到的，操作的都是一样的
活着的路由指的是根据不同用户（角色）可以展示不用菜单
如何实现菜单的权限？不同的用户所能操作|查看菜单不一样的？
起始不同的用户（角色），登录的时候会向服务器发请求，服务器会把用户相应的菜单的权限的信息，返回给我们
我们可以根据服务器返回的数据（信息），可以动态的设置路由，可以根据不同的用户展示不同的菜单。
回到登录界面
发现登录事件跟派发的action有关，查看vuex
这个data打印出来就是服务器返回来的数据
其中包含了：用户名name 用户头像avatar router[返回的标志：不同的用户应该展示那些菜单的标记] roles(用户角色信息) button 【按钮的信息：按钮权限用的标记】
而我们这里的模板只存了用户名和头像，这个明显是不完整的，将他修改完整
菜单权限:当用户获取用户信息的时候，服务器会把相应的用户拥有菜单的权限信息返回，需要根据用户身份对比出，当前这个用户需要展示哪些菜单
当用户登录的时候，服务器端会返回相应角色的菜单权限的信息
只不过返回信息是一个数组routes-->['sku','spu',produt']
然后回到router当中，把项目中的路由进行拆分
我们需要拆分出
常量路由：就是不管用户是什么角色（超级管理员，普通员工），都可以看见的路由例如登录，404，首页
异步路由：不同的角色，需要过滤选出的路由，称之为异步路由
任意路由：当路径出现错误的时候重新定位到404
然后根据这三种路由根据不同情况进行筛选
服务器返回来的路由信息跟我们的异步路由进行对比，判断是否显示
回到vuex中
先把异步路由引入进来
定义一个函数：俩个数组进行对比，对比出当前用户到底显示那些异步路由
但我们这些操作只是vuex保存当前用户的异步路由，注意，一个用户需要展示完成路由：常量，异步，任意路由，因此我们需要计算出当前用户展示的所有路由
1.首先需要将这三个路由先引入进来
2.在state中招一个变量用来存储它
3.算出当前用户展示的所有路由
展示出了所有需要展示的路由，但是左侧依旧还是一样，这个是因为我们在路由当中设置的是把常量路由写死的
因此我们需要添加新的路由
1.先引入router
2.给路由器添加新的路由
但并没有效果，这个是因为这个模板取的只有常量路由
到这里就完成了菜单的权限
之前权限界面无法显示这个是因为接口有问题，只需要添加/dev-api即可
显示成功
按钮权限
菜单权限：不同的用户（角色），能操作、能观看的菜单是不同的。
按钮的权限：不同的用户（角色），有的用户的是可见按钮、当然有的用户不可见。
vue elementUI tree树形控件获取父节点ID的实例
修改源码:
情况1: element-ui没有实现按需引入打包
node_modules\element-ui\lib\element-ui.common.js 25382行修改源码 去掉 'includeHalfChecked &&'
// if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
情况2: element-ui实现了按需引入打包
node_modules\element-ui\lib\tree.js 1051行修改源码 去掉 'includeHalfChecked &&'
// if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
为什么给了测试管理的权限，左侧菜单却没显示“测试管理”。因为没这个路由组件，所以建一个就有了
先写相应的组件
然后配置异步路由
效果实现
v-show="$store.state.user.buttons.indexOf('btn.Add1')!=-1"通过这种方式可以实现对按钮权限的控制
完整效果展示
完整项目如下
Chicksqace/vue_project at Branch_088eb50c (github.com)
记得切换分支到Branch_088eb50c当中
