vue电商后台管理系统——主页（二）——完成权限管理功能

最新推荐文章于 2024-08-08 18:15:31 发布

Minnor

最新推荐文章于 2024-08-08 18:15:31 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/holive_9/article/details/125266272

版权

本文介绍了如何在Vue电商后台管理系统中实现权限管理功能，包括权限列表的路由、面包屑导航、数据展示，角色列表的增删改查、权限分配以及用户分配角色等操作。详细阐述了每个功能的实现步骤，如生成权限列表、角色授权和权限删除功能，并讨论了用户体验优化措施。

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

文章目录

1.权限列表

添加权限列表路由

创建权限管理组件（Rights.vue），并在router/index.js添加对应的路由规则

import Rights from '../components/power/Rights.vue'
......
      path: '/home', component: Home, redirect: '/welcome', children: [
        {
    path: "/welcome", component: Welcome },
        {
    path: "/users", component: Users },
        {
    path: "/rights", component: Rights }
      ]
......

添加面包屑导航

在Rights.vue中添加面包屑组件展示导航路径

显示数据

在data中添加一个rightsList数据，在methods中提供一个getRightsList方法发送请求获取权限列表数据，在created中调用这个方法获取数据

<el-table :data="rightsList" stripe border>
    <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 v-else-if="scope.row.level === 1" type="success">二级权限</el-tag>
            <el-tag v-else type="warning">三级权限</el-tag>
        </template>
    </el-table-column>
</el-table>
<script>
export default {
   
    data(){
   
        return {
   
            //列表形式的权限
            rightsList:[]
        }
    },
    created(){
   
        this.getRightsList();
    },
    methods:{
   
        async getRightsList(){
   
            const {
   data:res} = await this.$http.get('rights/list')
            //如果返回状态为异常状态则报错并返回
            if (res.meta.status !== 200)
                return this.$message.error('获取权限列表失败')
            //如果返回状态正常，将请求的数据保存在data中
            this.rightsList = res.data
        }
    }
}
</script>

在这里插入图片描述

2.角色列表

添加角色功能（增）

// 3.添加角色按钮区域
...
<el-row>
  <el-col>
    <el-button type="primary" @click="addDialogVisible = true"
    >添加角色</el-button
  >
  </el-col>
</el-row>
...

      // 5.添加角色的功能对话框 row-15 -->
      <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%">
        // 5.1添加角色表单区域 -->
        <el-form
          :model="addForm"
          :