Vue项目 针对角色配置权限列表（菜单及页面功能）

提示：关于使用 Vue 和 ElementUI 做后台管理系统的权限

---

前言

现在很多管理系统都会需要权限管理，控制不同角色的菜单、页面功能、通过直接输入url跳转。此篇记录的是角色和用户的关系，以及给角色配置权限列表，如何根据权限列表控制菜单及页面功能请参考下篇

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、角色与用户关系

该项目实现的是角色和用户可以互选，多对多的关系，一个用户可以选择多个角色，一个角色会对应多个用户。若不需要多对多的关系，只需给一个用户选择一个角色即可，针对某个角色设置对应的权限列表。

二、针对角色设置对应的权限列表

1.实现效果

• 权限维护页面
  

2.权限维护页面

代码如下（示例）：

<template>
  <div class="detail">
    <div class="bg-content">
      <div class="operate">
        <el-button type="primary" size="small" @click="goBack">
          返回
        </el-button>
        <el-button type="primary" size="mini" @click="updateData">
          保存
        </el-button>
      </div>
      <div class="container">
        <div class="table-box">
          <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            height="100%"
          >
            <el-table-column prop="firstMenu" label="一级菜单">
              <template slot-scope="{ row, $index }">
                <el-checkbox
                  v-model="row.isCheckedFirstMenu"
                  :label="row.firstMenu"
                  @change="changeFirstMenu($index)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="secondMenu" label="二级菜单">
              <template slot-scope="{ row, $index }">
                <el-checkbox
                  v-if="row.secondMenu"
                  v-model="row.isCheckedSecondMenu"
                  :label="row.secondMenu"
                  @change="changeSecondMenu($index)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="operateList" label="操作">
              <template slot-scope="{ row, $index }">
                <span
                  v-for="(operate, operateIndex) in row.operateList"
                  :key="operateIndex"
                  style="margin-right: 10px"
                >
                  <el-checkbox
                    v-if="operate.function"
                    v-model="operate.isChecked"
                    :label="operate.function"
                    @change="changeOperateMenu($index, operateIndex)"
                  />
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
   
   
  getPermissionsMenuListByRoleId,
  getPermissionsLineByRoleId,
  roleBindPermissions
} from '@/aaa'
import lodash from 'lodash'
let childrenIndex = 0
export default {
   
   
  components: {
   
   },
  filters: {
   
   },
  data() {
   
   
    return {
   
   
      tableData: []
    }
  },
  created() {
   
   
    this.productLineList()
    this.getPermissionsMenuListByRoleId(this.$route.params.id)
  },
  mounted() {
   
   },
  methods: {
   
   
    // 获取菜单列表
    getPermissionsMenuListByRoleId(roleId) {
   
   
      getPermissionsMenuListByRoleId(roleId).then(res => {
   
   
        if (res.data.code == '200') {
   
   
          const tempData = res.data.data
          const checkedFirstMenuList = res.data.data
            ?.filter(item => item.isCheckedFirstMenu)
            ?.map(item => item.firstMenuId)
          this.tableData = tempData.map(item => {
   
   
            if (checkedFirstMenuList.includes(item.firstMenuId)) {
   
   
              return {
   
    ...item, isCheckedFirstMenu: true }
            }
            return {
   
    ...item }
          })
        } else {
   
   
          this.$notify({
   
   
            title: '提示'