1.通过权限管理调用后台的数据,在登录用户之后动态加载路由与菜单 并通过vuex 将路由信息及菜单信息保存到stroe中去
export default {
state: {
perms: [], // 用户权限标识集合
},
getters: {
},
mutations: {
setPerms(state, perms){ // 用户权限标识集合
state.perms = perms;
}
},
actions: {
}
}
api.user.findPermissions({'username': userName}).then(res => {
// 保存用户权限标识集合
// console.info(JSON.stringify(res.data))
store.commit('setPerms', res.data)
})
后台数据表
回传数据
[
{
"menuId": 18,
"parentId": 5,
"menuName": "修改菜单",
"path": "",
"component": "",
"perms": "menu:edit",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:08:02.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 19,
"parentId": 5,
"menuName": "删除菜单",
"path": "",
"component": "",
"perms": "menu:delete",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:08:02.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 21,
"parentId": 6,
"menuName": "修改部门",
"path": "",
"component": "",
"perms": "dept:edit",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:09:24.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 65,
"parentId": 64,
"menuName": "新增字典",
"path": "",
"component": "",
"perms": "dict:add",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2018-01-18T11:10:08.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 14,
"parentId": 4,
"menuName": "新增角色",
"path": "",
"component": "",
"perms": "role:add",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:06:38.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 67,
"parentId": 64,
"menuName": "删除字典",
"path": "",
"component": "",
"perms": "dict:delete",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2018-01-18T11:10:47.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 22,
"parentId": 6,
"menuName": "删除部门",
"path": "",
"component": "",
"perms": "dept:delete",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:09:24.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 17,
"parentId": 5,
"menuName": "新增菜单",
"path": "",
"component": "",
"perms": "menu:add",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:08:02.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 13,
"parentId": 3,
"menuName": "删除用户",
"path": "",
"component": "",
"perms": "user:delete",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:04:58.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 20,
"parentId": 6,
"menuName": "新增部门",
"path": "",
"component": "",
"perms": "dept:add",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:09:24.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 15,
"parentId": 4,
"menuName": "修改角色",
"path": "",
"component": "",
"perms": "role:edit",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:06:38.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 66,
"parentId": 64,
"menuName": "修改字典",
"path": "",
"component": "",
"perms": "dict:edit",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2018-01-18T11:10:27.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 16,
"parentId": 4,
"menuName": "删除角色",
"path": "",
"component": "",
"perms": "role:delete",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:06:38.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 11,
"parentId": 3,
"menuName": "新增用户",
"path": "",
"component": "",
"perms": "user:add",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:02:58.000+0000",
"modifyTime": null,
"menuChild": null
},
{
"menuId": 12,
"parentId": 3,
"menuName": "修改用户",
"path": "",
"component": "",
"perms": "user:edit",
"icon": null,
"type": "1",
"orderNum": null,
"createTime": "2017-12-27T09:04:07.000+0000",
"modifyTime": null,
"menuChild": null
}
]
自定义一个带有权限的按钮
<template>
<el-button :size="size" :type="type" :icon="icon"
:loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
{{label}}
</el-button>
</template>
<script>
import { hasPermission } from '@/permission/permission.js'
export default {
name: 'SkyButton',
props: {
label: { // 按钮显示文本
type: String,
default: 'Button'
},
icon: { // 按钮显示图标
type: String,
default: ''
},
size: { // 按钮尺寸
type: String,
default: 'mini'
},
type: { // 按钮类型
type: String,
default: null
},
loading: { // 按钮加载标识
type: Boolean,
default: false
},
disabled: { // 按钮是否禁用
type: Boolean,
default: false
},
perms: { // 按钮权限标识,外部使用者传入
type: String,
default: null
}
},
data() {
return {
}
},
methods: {
handleClick: function () {
// 按钮操作处理函数
this.$emit('click', {})
},
hasPerms: function (perms) {
// 根据权限标识和外部指示状态进行权限判断
return hasPermission(perms) & !this.disabled
}
},
mounted() {
}
}
</script>
<style scoped>
</style>
编辑权限管理的js 通过按钮中呈现的 权限例 user:add 来匹配从后台调用的数据 返回菜单时候可点击调用
import store from '@/store'
/**
* 判断用户是否拥有操作权限
* 根据传入的权限标识,查看是否存在用户权限标识集合
* @param perms
*/
export function hasPermission(perms) {
let hasPermission = false
let permissions = store.state.user.perms
for (let i = 0, len = permissions.length; i < len; i++) {
if (permissions[i].perms=== perms||perms==='all:reload') {
hasPermission = true;
break
}
}
// console.info(hasPermission)
return hasPermission
}
最后在应用改路由的的页面中调用
<template>
<div class="myContainer">
<!--工具栏-->
<div class="toolbar">
<el-form :inline="true" :model="filters" label-width="120px">
<el-form-item label="角色名称">
<el-input v-model="filters.name" placeholder="角色名" size="mini"></el-input>
</el-form-item>
<el-form-item label="角色名称">
<el-input v-model="filters.name" placeholder="角色名" size="mini"></el-input>
</el-form-item>
<el-form-item>
<sky-button icon="fa fa-search" :label="$t('action.search')" perms="role:view" type="primary"/>
</el-form-item>
<el-form-item>
<sky-button icon="fa fa-search" label="重置" perms="all:reload" type="primary"/>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8" type="flex" justify="end">
<el-col :span="1.5">
<sky-button icon="el-icon-plus" @click="drawer = true" label="新增" perms="role:add" type="primary"
size="mini"/>
</el-col>
<el-col :span="1.5">
<sky-button icon="el-icon-delete" label="批量删除" perms="role:delete" type="danger" size="mini"/>
</el-col>
<el-col :span="1.5">
<sky-button icon="el-icon-upload2" label="导入" perms="role:import" type="danger" size="mini"/>
</el-col>
<el-col :span="1.5">
<sky-button icon="el-icon-download" label="导出" perms="role:export" type="warning" size="mini"/>
</el-col>
</el-row>
</div>
<!--表格内容栏-->
<div class="contentbar"></div>
<sky-table :height="350" rowkey="name" permsEdit="role:edit" permsDelete="role:delete"
:data="pageResult" :columns="filterColumns"
@findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
</sky-table>
<el-drawer
title="我是标题"
:visible.sync="drawer"
:with-header="false">
<div class="demo-drawer__content">
<el-form :model="dataForm">
<el-form-item label="活动名称">
<el-input v-model="dataForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="dataForm.id" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确定'
}}
</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import SkyButton from "@/components/SkyButton/SkyButton.vue"
import SkyTable from "@/components/SkyTable/SkyTable.vue"
export default {
name: "role",
components: {
SkyButton,
SkyTable,
},
data() {
return {
drawer: false,
size: 'small',
filters: {
name: ''
},
columns: [],
filterColumns: [
{prop: "id", label: "ID", minWidth: 50},
{prop: "name", label: "用户名", minWidth: 120},
{prop: "deptName", label: "机构", minWidth: 120},
{prop: "roleNames", label: "角色", minWidth: 100},
{prop: "email", label: "邮箱", minWidth: 120},
{prop: "mobile", label: "手机", minWidth: 100},
{prop: "status", label: "状态", minWidth: 70},
],
loading: true,
pageRequest: {pageNum: 1, pageSize: 10},
pageResult: {
content: [{
id: '1',
name: '王小虎2',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
}, {
id: '2',
name: '王小虎3',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
children: [
{
id: '3',
name: '王小虎534',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
}, {
id: '4',
name: '王小虎51',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
}, {
id: '5',
name: '王小虎52',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
}, {
id: '6',
name: '王小虎53',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
}, {
id: '7',
name: '王小虎54',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
}, {
id: '8',
name: '王小虎55',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
},
],
}, {
id: '10',
name: '王小虎6',
deptName: '上海市普陀区金沙江路 1518 弄',
roleNames: '上海市普陀区金沙江路 1518 弄',
email: '上海市普陀区金沙江路 1518 弄',
mobile: '上海市普陀区金沙江路 1518 弄',
status: '上海市普陀区金沙江路 1518 弄',
}]
},
operation: false, // true:新增, false:编辑
dialogVisible: false, // 新增编辑界面是否显示
editLoading: false,
dataFormRules: {
name: [
{required: true, message: '请输入用户名', trigger: 'blur'}
]
},
// 新增编辑界面数据
dataForm: {
id: 0,
name: '',
password: '123456',
deptId: 1,
deptName: '',
email: 'test@qq.com',
mobile: '13889700023',
status: 1,
userRoles: []
},
deptData: [],
deptTreeProps: {
label: 'name',
children: 'children'
},
roles: []
}
},
methods: {
findPage() {
},
handleEdit() {
},
handleDelete() {
},
cancelForm() {
},
}
}
</script>
<style scoped>
.toolbar {
/*width: 98%;*/
background: #F7F7F7;
padding: 10px 5px 10px;
margin: auto;
}
</style>
<sky-button icon="el-icon-plus" @click="drawer = true" label="新增" perms="role:add" type="primary"
size="mini"/>
显示效果