权限控制之权限的设置

权限设置

什么是角色？

角色就是用户的身份，通常包含其权限信息。

权限的设置？

权限的设置就是在角色里设置该角色是否具有某一些权限。

一、问题：

1. 登录账号的权限与其新建角色的可选权限是否一致？自然是一致的

二、需求：

1. 选择角色权限时，可选权限应当为该登录账户下所具有的权限。不具有的权限应不显示。

权限设置的方案？

一、思路：

1. 前端应具有一个全部权限的数组moduleList；
2. 根据登录账号的不同匹配moduleList，生成新的数组；
3. 选择角色采用element-ui的tree组件进行渲染。

二、默认的全部权限数组

数据结构参考el-tree组件的结构，如下：

moduleList: [
    {id: 'survey', label: '项目概况', disabled: false},
    {id: 'realTime', label: '实时数据', disabled: false},
    {
      id: 'curve',
      label: '曲线分析',
      disabled: false,
      children: [
        {id: 'curveHistory', label: '历史曲线', disabled: false},
        {id: 'curveConsume', label: '耗量曲线', disabled: false}
      ]
    },
    {
      id: 'report',
      label: '报表分析',
      disabled: false,
      children: [
        {id: 'reportUserPart', label: '用户分报', disabled: false},
        {id: 'reportUser', label: '用户报表', disabled: false}
      ]
    },
    {id: 'warning', label: '维保管理', disabled: false},
    {id: 'push', label: '推送管理', disabled: false},
    {
      id: 'project',
      label: '项目管理',
      disabled: false,
      children: [
        {
          id: 'projectPoint',
          label: '计量点管理',
          disabled: false,
          children: [
            {id: 'projectPointDevice', label: '设备管理', disabled: false}
            {id: 'projectPointPoweroff', label: '停电纪录'}
          ]
        }
        {id: 'project_param', label: '参数详情'}
      ]
    },
    {id: 'user', label: '用户管理', disabled: false}
  ],

三、vuex中authority.js过滤设置当前登录用户的moduleList

需要传入用户权限表

import {defaultData} from '@/assets/utils/defaultData'

// 过滤权限模块
const filterModule = (allList, authorities) => {
  let arr = allList.filter(item => {
    if (item.children && item.children.length > 0) {
      item.children = filterModule(item.children, authorities)
      return true
    } else {
      if (authorities.includes(item.id)) {
        return true
      }
    }
  })
  return arr
}

const route = {
  state: {
    moduleList: [] // 权限功能模块
  },
  mutations: {
    SET_MODULELIST: (state, payload) => {
      state.moduleList = filterModule(defaultData.moduleList, payload)
    }
  }
}

export default route

四、调用设置modultList的位置

需要在登录获取到用户信息后调用，传入用户权限表

// 获取登录账户信息
GetInfo: ({ commit, state }) => {
  return new Promise((resolve, reject) => {
    getUserInfo().then(rsp => {
      commit('SET_USERINFO', rsp)
      commit('SET_AUTHORITIES', authorities)
      commit('SET_MODULELIST', state.authorities)
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
},

五、使用

只需要在新增编辑角色的代码里，把state.authority.moduleList设置到el-tree就大功告成了！