【Vue】实战项目：电商后台管理系统（Element-UI）（三）权限管理模块

最新推荐文章于 2022-04-10 23:36:01 发布

YK菌

最新推荐文章于 2022-04-10 23:36:01 发布

阅读量1.9k

点赞数

分类专栏：前端框架Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44972008/article/details/114676742

版权

本文详细介绍了使用Vue和Element-UI构建电商后台管理系统中权限管理模块的过程，包括权限列表的展示、角色列表的创建、编辑、删除，以及权限的分配和用户角色分配功能的实现。

摘要由CSDN通过智能技术生成

1. 权限管理业务分析

通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配
一个特定的角色，角色包括不同的功能权限。
在这里插入图片描述

2. 权限列表

2.1 通过路由展示权限列表组件

新建components/power/Rights.vue
引入路由

2.2 面包屑导航+卡片视图

<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>

<!-- 卡片视图 -->
<el-card></el-card>

2.3 调用API获取权限列表的数据

export default {
   
  data() {
   
    return {
   
      // 权限列表
      rightsList: []
    }
  },
  created() {
   
    // 获取所有的权限
    this.getRightsList()
  },
  methods: {
   
    async getRightsList() {
   
      const {
    data: result } = await this.$http.get('rights/list')
      if (result.meta.status !== 200) {
   
        return this.$message.error('获取权限列表失败！')
      }
      this.rightsList = result.data
      console.log(this.rightsList)
    }
  }
}

2.4 渲染权限列表UI结构

<!-- 卡片视图 -->
<el-card>
  <el-table :data="rightsList" border stripe>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="权限名称" prop="authName"></el-table-column>
    <el-table-column label="路径" prop="path"></el-table-column>
    <el-table-column label="权限等级" prop="level">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.level === '0'">一级</el-tag>
        <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
        <el-tag type="warning" v-else>三级</el-tag>
      </template>
    </el-table-column>
  </el-table>
</el-card>

3. 角色列表

3.1 通过路由展示角色列表组件

新建components/power/Roles.vue
引入路由

3.2 绘制基本布局结构并获取列表数据

<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
  <!-- 添加角色按钮区域 -->
  <el-row>
    <el-col>
      <el-button type="primary">添加角色</el-button>
    </el-col>
  </el-row>
  <!-- 角色列表区域 -->
  <el-table border stripe>
  </el-table>
</el-card>

export default {
   
  data() {
   
    return {
   
      // 所有角色列表数据
      roleList: []
    }
  },
  created() {
   
    this.getRolesList()
  },
  methods: {
   
    // 获取所有角色的列表
    async getRolesList() {
   
      const {
    data:result } = await this.$http.get('roles')
      if(result.meta.status !== 200){
   
        return this.$message.error('获取角色列表失败！');
      }
      this.roleList = result.data
      console.log(this.roleList)
    }
  }
}

3.3 渲染角色列表数据

<!-- 角色列表区域 -->
<el-table :data="roleList" border stripe>
  <!-- 展开列 -->
  <el-table-column type="expand"></el-table-column>
  <!-- 索引列 -->
  <el-table-column type="index"></el-table-column>
  <el-table-column label="角色名称" prop="roleName"></el-table-column>
  <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
  <el-table-column label="操作" width="300px">
    <template>
      <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
      <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
      <el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
    </template>
  </el-table-column>
</el-table>

3.4 添加角色+编辑+删除操作

和用户管理中操作类似
【Vue】实战项目：电商后台管理系统（Element-UI）（二）用户管理模块

3.5 通过第一层for循环渲染一级权限

<!-- 展开列 -->
<el-table-column type="expand">
  <template slot-scope="scope">
    <el-row v-for="(item1, index1) in scope.row.children" :key="item1.id">
      <!-- 渲染一级权限 -->
      <el-col :span="5">
        <el-tag>{
  { item1.authName }}</el-tag>
      </el-col>
      <!-- 渲染二级、三级权限 -->
      <el-col :span="19"></el-col>
    </el-row>
    <!-- <pre>
      {
   {scope.row}}
    </pre> -->
  </template>
</el-table-column>

3.6 美化一级权限的UI结构

添加边框线
添加图标

<el-table-column type="expand">
  <template slot-scope="scope">
    <el-row 
    :class="['bdbottom', index1 === 0 ? 'bdtop' : '']" 
    v-for="(item1, index1) in scope.row.children" 
    :key="item1.id">
      <!-- 渲染一级权限 -->
      <el-col :span="5">
        <el-tag>{
  { item1.authName }}</el-tag>
        <i class="el-icon-caret-right"></i</