接上篇《31、权限管理-实现权限列表》
上个阶段我们完成了权限管理模块，本篇我们来介绍用户、角色和权限三者的关系，并完成角色管理列表模块。
一、权限管理业务分析
通过权限管理模块，控制不同用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同功能的权限：
对一个列表来说，它分为增删改查等等这些操作，每一个操作都叫做一个权限。例如有的用户只允许有添加的权限，但是没有删除的权限，有的用户只有查询的权限，没有增加和删除的权限。
此时我们就可以认为不同的用户由于他身份的不同，导致他的权限也不一样。而我们并没有直接把权限绑定到每一个用户身上，而是在用户和权限之间设置了不同的角色。我们首先把权限分配给不同的角色，然后再把这个角色分配给对应的用户，这样只要用户拥有了这个角色，那么它肯定也拥有这个角色下所有的权限。
二、角色管理列表路由及组件创建
我们在components/power下创建一个“Roles.vue”文件：
然后在“Roles.vue”文件中编写基本代码结构：
<template>
<div>
<h3>角色列表组件页面</h3>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
然后我们在“router/index.js”下引入Roles组件，并在路由规则中定义路由规则：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/user/Users.vue'
import Rights from '../components/power/Rights.vue'
import Roles from '../components/power/Roles.vue'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login }, //定义访问页面的路由地址
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{path:'/welcome',component:Welcome},
{path:'/users',component:Users},
{path:'/rights',component:Rights},
{path:'/roles',component:Roles}
]
}
]
})
//挂载路由导航守卫
//to是我们跳转的路径，from是来自的路径，next为放行函数
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();//有token，直接放行
})
export default router
然后我们刷新页面，点击角色管理菜单，就被路由到刚刚创建的组件上了：
三、绘制角色列表基本布局
最终效果图大致如下：
可以看到和权限列表一样，在卡片视图中放了一个table表格。
先编写左上角面包屑导航，然后通过“el-card”创建一个卡片视图区域，里面放导航：
<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> 123</el-card>
</div>
</template>
<script>
export default { }
</script>
<style scoped>
</style>
效果：
四、获取角色列表数据
下面是获取角色数据的API文档：
●响应数据
{
"data": [
{
"id": 30,
"roleName": "主管",
"roleDesc": "技术负责人",
"children": [
{
"id": 101,
"authName": "商品管理",
"path": null,
"children": [
{
"id": 104,
"authName": "商品列表",
"path": null,
"children": [
{
"id": 105,
"authName": "添加商品",
"path": null
}
]
}
]
}
]
}
],
"meta": {
"msg": "获取成功",
"status": 200
}
}我们可以看到第一层是角色信息，第二层是权限的说明（三层，使用children属性嵌套子属性），最后一层不包含children属性。
因此我们在Roles.vue中的方法区，新建一个名为“rolesList”的列表对象，用来承载权限管理信息数组。然后在生命周期函数“created()”中（即页面加载时）执行获取角色列表数据的方法：
<script>
export default {
data(){
return {
//角色列表
rolesList: []
}
},
created(){
//获取所有的角色信息
this.getRolesList();
},
methods:{
//获取角色列表
getRolesList(){
}
}
}
</script>
这里我们定义了一个名为“getRolesList”的方法，我们在该方法中编写获取角色列表的代码：
//获取角色列表
async getRolesList(){
const {data:res} = await this.$http.get('roles/list');
if(res.meta.status!==200){
return this.$message,error("获取角色列表失败！");
}
this.rolesList = res.data;
}
然后我们需要将拿到的数据，渲染到table上，我们在上面的卡片视图区域编写table表格：
<!-- 卡片视图 -->
<el-card>
<el-table>
<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 slot-scope="{}">
<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>
</el-card>
刷新页面，我们可以看到数据已经出来：
五、角色展开查看权限
效果图中点开相应的角色是可以查看下面绑定的权限的：
我们来实现它。首先我们分析一下之前角色列表API返回的数据：
{
"data": [
{
"id": 30,
"roleName": "主管",
"roleDesc": "技术负责人",
"children": [
{
"id": 101,
"authName": "商品管理",
"path": null,
"children": [
{
"id": 104,
"authName": "商品列表",
"path": null,
"children": [
{
"id": 105,
"authName": "添加商品",
"path": null
}
]
}
]
}
]
}
],
"meta": {
"msg": "获取成功",
"status": 200
}
}我们只需要取得当前角色的children子权限，然后遍历所有子权限的子权限，直到最后一层子权限。
我们在列表区域的index上面，添加一个展开列，type为“expand”（ElementUI的展开效果组件），然后在里面使用作用域插槽，获取相应的对象，遍历其children子权限：
<!-- 卡片视图 -->
<el-card>
<el-table :data="rolesList" border stripe>
<!-- 展开列 -->
<el-table-column type="expand">
<template slot-scope="scope">
<el-row :class="['bdtop bdbottom']" v-for="item1 in scope.row.children" :key="item1.id">
<!-- 渲染一级权限 -->
<el-col :span='5'>
<el-tag>{{item1.authName}}</el-tag>
<i class="el-icon-caret-right"></i><!-- 箭头小图标 -->
</el-col>
<!-- 渲染二级、三级权限 -->
<el-col :span='19'></el-col>
</el-row>
</template>
</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 slot-scope="{}">
<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>
</el-card>
其中上面使用el-row和el-col为表行重新划分了区域，一级菜单占20%，二级三级菜单占80%。
然后美化一下子权限tag标签的边距，然后编写为内嵌行添加上下边框线的bdtop和bdbottom样式：
<style scoped>
.el-tag {
margin: 7px;
}
.bdtop{
border-top: 1px solid #eee;
}
.bdbottom{
border-bottom: 1px solid #eee;
}
</style>
刷新页面，我们可以看到一级子权限已经遍历出来了：
然后我们如法炮制，把二级菜单加载出来（即在二级的el-col下继续使用el-row遍历二级的children）：
<!-- 展开列 -->
<el-table-column type="expand">
<template slot-scope="scope">
<el-row :class="['bdtop bdbottom']" v-for="item1 in scope.row.children" :key="item1.id">
<!-- 渲染一级权限 -->
<el-col :span='5'>
<el-tag>{{item1.authName}}</el-tag>
<i class="el-icon-caret-right"></i><!-- 箭头小图标 -->
</el-col>
<!-- 渲染二级、三级权限 -->
<el-col :span='19'>
<!-- 通过for循环，嵌套渲染二级权限 -->
<el-row :class="['bdbottom']" v-for="item2 in item1.children" :key="item2.id">
<!-- 渲染二级权限 -->
<el-col :span='5'>
<el-tag type="success">{{item2.authName}}</el-tag>
<i class="el-icon-caret-right"></i><!-- 箭头小图标 -->
</el-col>
<!-- 渲染三级权限 -->
<el-col :span='19'>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
</el-table-column>
效果：
然后我们在最后一层el-col中，只需要遍历el-tag标签本身即可：
<!-- 渲染三级权限 -->
<el-col :span='19'>
<el-tag :class="['bdbottom']" type="warning"
v-for="item3 in item2.children" :key="item3.id">
{{item3.authName}}
</el-tag>
</el-col>
效果：
最后因为缩小页面会导致小箭头图标换行：
为防止这种问题，我们在全局样式文件assets/css/global.css下的“#app”中新增一个全局最小宽度，防止页面变形：
/* 全局样式表 */
html,
body,
#app{
height: 100%;
margin: 0;
padding: 0;
min-width: 1399px;
}
页面缩小效果：
至此，我们的角色列表模块开发完成。
下一篇我们来实现删除角色下权限的功能。
