vue后台权限管理

现在网上有一个很棒的案例vue-element-admin，它已经集成了管理后台的绝大部分的功能，可以适合很多的项目构建，对于程序员来说思想很重要，于是参照它的思想，自己撸了一个管理后台。

管理后台构建思想

1 对使用人员：先创建角色，在创建人员。简单说角色对应页面
2 对开发人员：先确认导航路由，在划分菜单

管理后台角色的划分

管理后台角色定制开发方式可以分为2种

1 在项目构建时直接定义：这种方式需要在产品已经很明确的时候适合这样来干。
优点：角色明确可以很容易划分功能模块，后续的开发配置环节很简单实现，测试功能明确
缺点：在开发新页面的时候必须先配置后开发，页面的权限更改比较麻烦，要不停的给测试配置新的权限。
2 在项目结束前定义：广大项目最好的选择。
优点：页面开发无需考虑权限，测试人员无需变更，简单就是先开发一个超级管理员的账号。
缺点：在最后定制考虑较大，较广，需要多次确认。
我的项目角色分为 超管，客服经理，客服，运营经理，运营人员，项目角色明确，每个页面的角色权限也很明确，就采用的方式一，当二者不满足其中任意一项的时候，一定要选择方式2 ！！！！切记，下面的都以方式2讲

提供可配置角色（案例没有）

在配置角色的时候要先确定页面对应的角色即现有页面再有角色
在页面开发完成之后，我们需要先创建一个角色，然后在给它配
置页面，

WX20180815-114956.png

WX20180815-115743.png

就像上面展示的那样，先添加角色，在给角色划分页面权限；
在给每个页面划分权限的时候，我们只需要分为2种，get change（add,del,update），都会以一种权重的方式传给后台，通过和后台配合就能达到精确到每一个按钮。
这里有几种配置方式，我采用的是先获取,在修改，分类添加，即根据一级菜单来划分，一个栏目来划分

管理员添加

页面类似这样

WX20180815-121026.png

我们首先要选择角色在来添加用户，以一定的规则来生成用户的密码。

管理员的添加依赖角色

前端导航路由的配置

在用户登录后，我们可以获取到用户的角色，通过角色获取到角色对应的页面。
具体做法：在我们前台保存一份完整的路由，每个页面我们都会添加一个权重，也就是在配置角色的时候，传给后台的权重，通过这个就可以拿到自己需要有那些页面，以及每个页面需要的功能（get和change）。最后在拼接出我们需要的页面的路由。

前端菜单栏的生成

菜单栏的生成和路由的生成很类似，拿到的路由表里面应该包含的有我们所需要的菜单表，
通过路由表来生成我们的菜单表。

类似这样的路由表

 [
{
      index: '100',
      path: '/home/index', //生成路由
      name: '首页',  //生成菜单
      haschild: false, //生成菜单
      children: [],
      meta: {
        name: '首页',
        check: false, // 权重
        change: false, // 权重
        page_id: 100  // 区分页面
      }
 },
    // 下面类似
{
      index: '100',
      path: '/home/index',
      name: '测试',
      haschild:true,
      meta: {
          name: '测试',
          check: false,
          change: false,
         page_id: 100
      }
      children: [
          index: '100',
          path: '/home/index',
          name: '测试1子菜单',
          haschild: false,
          children: [],
          meta: {
             name: '测试1子菜单',
             check: false,
             change: false,
             page_id: 100
         } 
       ],
    
 },
]