后台管理系统——权限管理模块学习记录【用户管理、角色管理、菜单管理】

一、权限内容介绍

对于不同用户的权限、角色、操作等等业务逻辑，进行分类。

角色：对于一家企业而言：BOSS、运维、销售、程序员

权限：超级管理员（BOSS），是有权利操作整个项目的所有的模块

员工：只能首页、商品管理者一部分菜单数据

admin：超级管理员-----boss

二、实现用户管理

①用户的信息，包含：用户名name、用户头像avata、routes[返回的标志:不同的用户应该展示哪些菜单的标记]、roles[用户角色信息]、buttons【按钮的信息:按钮权限用的标记)

对模版的进行修改，以实现我们的用户名、用户头像、同的用户应该展示哪些菜单的标记、用户角色信息

  //在actions中 获取用户信息 = 区分超级管理员与普通用户
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        // 用户的信息，包含：用户名name、用户头像avata、routes[返回的标志:不同的用户应该展示哪些菜单的标记]、roles[用户角色信息]、buttons【按钮的信息:按钮权限用的标记)
        const { data } = response
        // vuex存储用户的全部信息
        commit('SET_USERINFO', data)
        // 计算出异步路由，已有的异步路由【asyncRoutes】与服务器返回的异步路由【data.routes】进行对比。定义一个函数来比对
        commit('SET_RESULTASYNCROUTES', computedAsyncRoutes(asyncRoutes, data.routes))
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

   // 在mutations中
    // 存储用户信息
  SET_USERINFO: (state, userInfo) => {
    // 用户名
    state.name = userInfo.name
    // 头像
    state.avatar = userInfo.avatar
    // 菜单权限
    state.routes = userInfo.routes
    // role
    state.roles = userInfo.roles
    // button
    state.button = userInfo.button
    // 角色信息
    roles: [],
    // 对比【已有的异步路由，与服务器返回的标记信息进行比对信息，展示出最终要展示的路由】
    // 数组里面放对象，鉴别出是超级管理员还是普通用户， 通过计算出来。 在userInfo.data中三连环计算
    resultAsyncRoutes: [],
    // 用户最终展示的路由
    resultAllRoutes: []
  },

②完成菜单权限

当用户获取用户信息的时候，服务器会把相应的用户拥有菜单的权限信息返回，需要根据用户身份对比出，当前这个用户需要展示哪些菜单。

所以先对路由进行拆分：常量路由、异步路由、任意路由

③对于如何计算出异步路由。让不同的用户有不同的权限

    对比【已有的异步路由，与服务器返回的标记信息进行比对信息，展示出最终要展示的路由】

    注： 这个函数是上方代码中计算异步路由的方法，用到递归。因为在用到el-UI中Tree树形结构，有多级函数。

    计算完异步路由，将结果赋值给最终路由【resultAllRoutes】，即不同用户展示出来不同菜单栏。【普通用户是没有异步路由的，只有管理员才有】

④对于最终路由，虽然已经计算好，但因为模版作者设置的遍历菜单栏都是常量路由，应替换为仓库中已经计算好的全部路由。 

【最终路由】

actions

mutations

更改遍历栏【/src/layout/components/Sidebar/index.vue】

更改遍历栏之前

更改遍历栏之后

三、项目实现不同用户下，展示的页面功能不同。超级管理员可以对普通用户的功能进行增删改查。

admin超级管理员设置其中一个用户权限