Vue 人资 实战篇八 权限设计 重点！！！路由访问权限，左侧导航栏显示等等，还有 mixin 混入方法

1.0 权限设计-RBAC的权限设计思想

传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限

基于此，RBAC的权限模型就应运而生了，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下

RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可，接下来，我们就在该项目中实施这一设想

2.0 给分配员工角色

**目标**在员工管理页面，分配角色

2.1 新建分配角色窗体

1. 首先，新建分配角色窗体 assign-role.vue

<template>
  <el-dialog title="分配角色" :visible="showRoleDialog">
    <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
    <el-checkbox-group>
      <!-- 选项 -->
    </el-checkbox-group>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small">确定</el-button>
        <el-button size="small">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
   
  props: {
   
    showRoleDialog: {
   
      type: Boolean,
      default: false
    },
    // 用户的id 用来查询当前用户的角色信息
    userId: {
   
      type: String,
      default: null
    }
  }
}
</script>

去主页面设置 
 <el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
 <!-- 分配角色组件 -->
<assign-role :showRoleDialog.sync="showRoleDialog" :userId.sync="userId">
</assign-role>

import AssignRole from './components/assign-role.vue'
components: {
   
    AddEmployee,
    AssignRole
  },

  showRoleDialog: false, // 分配角色弹出层
  userId: null, // id

2.2 获取角色列表和当前用户角色

1. 获取所有角色列表

  <!-- 分配角色 -->
    <el-checkbox-group v-model="roleIds">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
        {
   {
   
          item.name
        }}
      </el-checkbox>
    </el-checkbox-group>

2. 获取角色列表

import {
    getRoleList } from '@/api/setting'

export default {
   
  props: {
   
    showRoleDialog: {
   
      type: Boolean,
      default: false
    },
    userId: {
   
      type: String,
      default: null
    }
  },
  data() {
   
    return {
   
      list: [], // 角色列表
      roleIds: []
    }
  },
  created() {
   
    this.getRoleList()
  },
  methods: {
   
    //  获取所有角色
    async getRoleList() {
   
      const {
    rows } = await getRoleList()
      this.list = rows
    }
  }
}

3. 获取用户的当前角色

import {
    getUserDetailById } from '@/api/user'

 async getUserDetailById(id) {
   
      const {
    roleIds } = await getUserDetailById(id)
      this.roleIds = roleIds // 赋值本用户的角色
  }

4. 点击角色弹出层

// 编辑角色
 async  editRole(id) {
   
      this.userId = id // props传值 是异步的
      await this.$refs.assignRole.getUserDetailById(id) // 父组件调用子组件方法
      this.showRoleDialog = true
    },
  <!-- 放置角色分配组件 -->
 <assign-role ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />

2.3 给员工分配角色

1. 分配角色接口 api/employees.js

/** *
 * 给用户分配角色
 * ***/
export function assignRoles(data) {
   
  return request({
   
    url: '/sys/user/assignRoles',
    data,
    method: 'put'
  })
}

2. 确定保存 assign-role

async btnOK() {
   
      await assignRoles({
    id: this.userId, roleIds: this.roleIds })
      //   关闭窗体
      this.$emit('update:showRoleDialog', false)
    },

3. 取消或者关闭 assign-role

@close="btnCancel"
btnCancel() {
   
      this.roleIds = [] // 清空原来的数组
      this.$emit('update:showRoleDialog', false)
    }

3.0 权限点管理页面开发

目标： 完成权限点页面的开发和管理

3.1 新建权限点管理页面

人已经有了角色， 那么权限是什么

在企业服务中，权限一般分割为 页面访问权限，按钮操作权限，API访问权限

API权限多见于在后端进行拦截，所以我们这一版本只做**页面访问和按钮操作授权/**

1. 完成权限页面结构 src/views/permission/index.vue

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <pag