目录

一 点睛

1 权限管理业务分析

二 代码

1 新建 Roles.vue

2 修改路由配置文件 index.js

三 测试

四 源码参考

一 点睛

1 权限管理业务分析

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

二 代码

1 新建 Roles.vue

<template>
    <div>
        <!-- 面包屑导航区 -->
        <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" @click="AddRoleDialogVisible=true">添加角色</el-button>
                </el-col>
            </el-row>
            <!-- 角色列表区 -->
            <el-table :data="rolesList" border stripe>
                <!-- 展开列，通过 expand 实现 -->
                <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="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">
                            编辑
                        </el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete"
                                   @click="removeRoleById(scope.row.id)">删除
                        </el-button>
                        <el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加角色对话框 -->
        <el-dialog title="添加角色" :visible.sync="AddRoleDialogVisible" width="40%" @close="addRoleDialogClosed">
            <el-form
                    :model="addRoleForm"
                    ref="addRoleFormRef"
                    :rules="addRoleFormRules"
                    label-width="100px">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addRoleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="addRoleForm.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="AddRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 编辑角色对话框 -->
        <el-dialog title="编辑角色" :visible.sync="editRoleDialogVisible" width="40%" @close="addRoleDialogClosed">
            <el-form
                    :model="editRoleForm"
                    ref="editRoleFormRef"
                    :rules="editRoleFormRules"
                    label-width="100px">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="editRoleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="editRoleForm.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRoles">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        name: "Roles",
        data() {
            return {
                // 所有角色列表数据
                rolesList: [],
                // 添加角色对话框
                AddRoleDialogVisible: false,
                // 添加角色表单
                addRoleForm: {},
                // 添加角色表单验证
                addRoleFormRules: {
                    roleName: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'}
                    ],
                    roleDesc: [
                        {required: true, message: '请输入角色描述', trigger: 'blur'}
                    ]
                },
                // 编辑角色信息
                editRoleForm: {},
                editRoleDialogVisible: false,
                editRoleFormRules: {
                    roleName: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'}
                    ],
                    roleDesc: [
                        {required: true, message: '请输入角色描述', trigger: 'blur'}
                    ]
                },
            }
        },
        created() {
            this.getRolesList()
        },
        methods: {
            // 获取所有角色列表
            async getRolesList() {
                const {data: res} = await this.$http.get('roles')
                if (res.meta.status !== 200) {
                    return this.$message.error("获取角色列表失败！")
                }
                this.rolesList = res.data
            },
            // 添加角色
            addRoles() {
                this.$refs.addRoleFormRef.validate(async valid => {
                    if (!valid) return
                    const {data: res} = await this.$http.post('roles', this.addRoleForm)
                    if (res.meta.status !== 201) {
                        this.$message.error('添加角色失败！')
                    }
                    this.$message.success('添加角色成功！')
                    this.AddRoleDialogVisible = false
                    this.getRolesList()
                })
            },
            // 删除角色
            async removeRoleById(id) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该角色, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const {data: res} = await this.$http.delete('roles/' + id)
                if (res.meta.status !== 200) return this.$message.error('删除角色失败！')
                this.$message.success('删除用户成功！')
                this.getRolesList()
            },
            // 编辑角色
            async showEditDialog(id) {
                const {data: res} = await this.$http.get('roles/' + id)
                if (res.meta.status !== 200) return this.$message.error('查询角色信息失败！')
                this.editRoleForm = res.data
                this.editRoleDialogVisible = true
            },
            editRoles() {
                this.$refs.editRoleFormRef.validate(async valid => {
                    // console.log(valid)
                    // 表单预校验失败
                    if (!valid) return
                    const {data: res} = await this.$http.put(
                        'roles/' + this.editRoleForm.roleId,
                        {
                            roleName: this.editRoleForm.roleName,
                            roleDesc: this.editRoleForm.roleDesc
                        }
                    )
                    if (res.meta.status !== 200) {
                        this.$message.error('更新角色信息失败！')
                    }
                    // 隐藏编辑角色对话框
                    this.editRoleDialogVisible = false
                    this.$message.success('更新角色信息成功！')
                    this.getRolesList()
                })
            },
        }
    }
</script>


<style scoped>


</style>

2 修改路由配置文件 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import Login from "../components/Login";
// 导入Home 组件
import Home from "../components/Home";
// 导入Welcome 组件
import Welcome from "../components/Welcome";
// 导入 Users 组件
import Users from "../components/user/Users";
// 导入权限列表 组件
import Rights from "../components/power/Rights";
// 导入角色列表 组件
import Roles from "../components/power/Roles";
import {renderThumbStyle} from "element-ui/packages/scrollbar/src/util";


Vue.use(VueRouter)


const routes = [
    // 路由重定向,当访问/,就会重定向到/login
    {
        path: '/',
        redirect: '/login'
    },
    // 定义登录路由规则
    {
        path: '/login',
        component: Login
    },
    // 定义Home的路由规则
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children: [
            {
                path: '/welcome',
                component: Welcome
            },
            /* 用户管理 */
            {
                path: '/users',
                component: Users
            },
            /* 权限管理 */
            {
                path: '/rights',
                component: Rights
            },
            /* 角色管理 */
            {
                path: '/roles',
                component: Roles
            },
        ]
    }
]


const router = new VueRouter({
    routes
})
// 挂载路由导航守卫
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是个函数，表示放行 next() 放行  next('/login') 强制跳转
router.beforeEach((to, from, next) => {
    // 如果用户访问的登录页，直接放行
    if (to.path === '/login') return next();
    // 从 sessionStorage 中获取到保存的 token 值
    const tokenstr = window.sessionStorage.getItem('token')
    // 没有 token，强制跳转到登录页
    if (!tokenstr) return next('/login')
    next()
})

export default router

三 测试

四 源码参考

https://gitee.com/cakin24/vue_shop