Vue+ElementUI实现权限管理系统：页⾯权限控制（菜单+按钮）
权限控制⽅案
既然是后台权限管理系统，当然少不了权限控制啦，⾄于权限控制，前端⽅⾯当然就是对页⾯资源的访问和操作控制啦。
前端资源权限主要⼜分为两个部分，即导航菜单的查看权限和页⾯增删改操作按钮的操作权限。
菜单类型
菜单类型代码页⾯资源的类型。类型包括，0：⽬录 1：菜单 2：按钮’。
根据为不同⾓⾊分配相应的资源进⾏展⽰不同的导航菜单以及按钮形式。⾓⾊分配的有哪些菜单或者按钮，页⾯显⽰出相应的菜单或者按钮。（只解释前端部分，以及数据结构样式，可让后端根据数据结构进⾏处理数据。）
数据结构例⼦：
登录的时候将该账号对应的⾓⾊所具有的权限返回出来存到ssionStorage 或者vuex⾥边进⾏存储，注意：为了区分开菜单资源和按钮资源防⽌登录的时候资源对菜单照成影响导致按钮资源出现在菜单上⽤menuTypeCn 这个资源类型字段区分。登录的时候只需要将所有的菜单权限展⽰出来就⾏了。然后根据菜单查出来该菜单下的按钮。
权限标识
权限标识即是代表此页⾯资源，⽤来进⾏权限控制的唯⼀标识，主要是进⾏增删改查的权限控制。
权限标识包括，sys:ur:add：新增 sys:ur:edit：编辑 sys:ur:delete：删除 sys:ur:view：查看。注：权限标识符可以根据实际情况 定义 例如
以上简单解释⼀下 下边直接上代码 提供过代码解释
第⼀步 我们需要具有⼀个权限资源列表 去管理我们所有的权限资源 包括 菜单 按钮等
这⾥我采⽤的是⼀个树形表格控件
menu 的数据结构对应上边的数据结构 是⼀个带有层级关系的⼀个集合
<el-table :data="menu" row-key="id" height='760' :tree-props="{children: 'children'}" :header-cell- border class='tabel' v-loading='ta bLoading'>
<el-table-column label='名称' >
<template slot-scope="scope">
{{uName}}
</template>
</el-table-column>
<el-table-column label='类型' >
<template slot-scope="scope">
{{uTypeCn}}
</template>
</el-table-column>
<el-table-column label='值' >
<template slot-scope="scope">
{{uCode}}我们结婚了中秋特辑>西安翻译公司
</template>
flura
</el-table-column>
<el-table-column label='图标' >
<template slot-scope="scope">
measurements
{{uIcon}}
</template>
</el-table-column>
<el-table-column label='排序' >
<template slot-scope="scope">
{{uSequence}}
</template>
</el-table-column>
<el-table-column label='操作'>
<template slot-scope="scope" v-if='scope'>
<kt-button label='添加' size='mini' perms='acc:rule:add1' type='primary' @click='w)'></kt-button>
<kt-button label='编辑' size='mini' perms='acc:rule:edt' type='primary' @click='w)'></kt-button>
<kt-button label='删除' size='mini' perms='acc:rule:del' type='danger' @click='w)'></kt-button>
</template>
</el-table-column>
</el-table>
管理好我们的这个列表之后
第⼆步：
有⾃⼰的账号管理模块 以及⾓⾊管理模块 为⾃⼰的账号 分配⾓⾊ ⼀般情况下 ⼀个账号对应⼀个⾓⾊
这⾥不做主要解释
第三步：
对账号分配完⾓⾊，需要对⾓⾊分配资源，保证我们菜单以及按钮的可控性。
这⾥不再做过多解释，就是正常的分配权限 包括 按钮权限和菜单权限 可以同步分配。
PS：如果各位需要 第⼆步 第三步详细解释 我之后可以进⾏补充
第四步：
之前已经在登录的时候将所有的菜单权限返回出来了，不返回按钮资源是为了防⽌ 数据往菜单显⽰的时候按钮资源也会显⽰出来 ，如若后端数据⼀起返回按钮资源 前端同样可以通过判断 去除按钮资源
附代码 菜单部分，（可提供到三级菜单） data 对象⾥的代码不在展⽰
:default-active='routter'
:collap='isShow'
class="sidebar-el-menu"
:
:text-color="fontColor"
active-text-color="#fff"
:background-color="color"
靴子英文
unique-opened
router
argentina是什么意思>
<!-- ⼀级菜单 -->
<template v-for="(item, index) in menu" >
<template v-if="item.children.length > 0">
<el-menu-item v-if="item.children[0].menuTypeCn == '按钮'" :index="uCode" :key="index"><template><i :class="uIcon" :></i><span slot="title">{{uName}}</span></template></el-menu-item>
<template v-el>
<el-submenu v-if="item.children && item.children.length" :index="uCode" :key="index">
<template slot="title"><i :class="uIcon" :></i><span>{{uName}}</span></template>
<!-- ⼆级菜单 -->
<template v-for="(itemChild, indey) in item.children">
<template v-if="itemChild.children.length > 0">
adonis
<el-menu-item v-if="itemChild.children[0].menuTypeCn == '按钮'" :index="uCode" :key="indey"><span slot="title">{{itemChild.m enuName}}</span></el-menu-item>
<el-submenu :index="uCode" :key="indey" class="erji" v-el>
<template slot="title"><span>{{uName}}</span></template>
<!-- 三级菜单 -->
<el-menu-item v-for="(itemChild_Child, indez) in itemChild.children" :index="uCode" :key="indez">
<span slot="title">{{uName}}</span>
</el-menu-item>
</el-submenu>
</template>
统招本科
<template v-el>
<el-menu-item :index="uCode" :key="indey"><span slot="title">{{uName}}</span></el-menu-item>考研心得
</template>
</template>
</el-submenu>
</template>
</template>
<template v-el>
<el-menu-item :index="uCode" :key="index"><template><i :class="uIcon" :></i><span slot="title">{{uName}}</span></template></el-menu-item>
</template>
</template>
</el-menu>
fontColor 默认颜⾊ ffffff
这个color 监听可要可不要 ，这个监听主要是监听主题颜⾊变换，因为如果是⽩⾊主题 配上⽩⾊字体的话⽩⾊字体显⽰不出来 就去监听下
主题变换 切换字体颜⾊ 防⽌出现 字体和主题颜⾊相近 显⽰不出来的情况，可以去除，只留路由监听即可。
},
watch: {
color(curVal,oldVal){
let col = place('#',"")
if(this.hex2int(col) > this.hex2int('66FFFF')){
this.fontColor = '#000000'
}el{
this.fontColor = '#ffffff'
}
},
$route(to,form){
}
},
methods: {
getBtn(router){
queryMenuButton({urId:JSON.Item('urInfo')).id,menuCode:router}).then(res => { if(res.status == 200){
ssionStorage.tItem('btnList',JSON.stringify(res.data))
}
})
},
}
通过监听路由 去获取该路由页⾯所有的被分配按钮资源，
页⾯操作按钮提供权限标识，查询是否在⽤户权限标识集合中。
在：有权限，可见或可⽤，不在：⽆权限，不可见或禁⽤。
⽬前本系统采⽤的是 按钮标识如果不在权限集合中则不显⽰ ，反之 则显⽰。
KtButton.vue 公共按钮组件
<template>
奥巴马妻谈特朗普<el-button :size="size" :type="type"
:loading="loading" @click="handleClick" v-if="hasPerms(perms)" :icon="icon" :plain='plain'>
<!-- v-if="hasPerms(perms)" -->
{{label}}
</el-button>
</template>
<script>
/
/ import { hasPermission } from '@/permission/index.js'
export default {
name: 'KtButton',
props: {
label: { // 按钮显⽰⽂本
type: String,
default: ''
},
size: { // 按钮尺⼨
type: String,
default: 'mini'
},
type: { // 按钮类型
type: String,
default: null
},
loading: { // 按钮加载标识
type: Boolean,
default: fal
},
