后台管理系统: 权限管理

权限管理

角色:一家企业而言：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当中