第一步:在src下面建立一个自定义指令文件,放自定义指令方法
permission.js文件:
/**
* v-hasPermi 操作权限处理
*/
import store from "@/store";
export default {
inserted(el, binding) {
const { value } = binding;
//从仓库里面获取到后台给的数组
const permission = store.getters && store.getters.permissions;
console.log("permission===", permission);
if (value && Array.isArray(value) && value.length > 0) {
const hasPermissions = permission.some((item) => {
return value.includes(item.perms);
});
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el);
}
} else {
throw new Error(`未设置权限`);
}
},
};
index.js文件:
import hasPermi from './permission'
const install = function(Vue) {
Vue.directive('hasPermi', hasPermi)
}
export default install
后端返回的数据结构:
第二步:在main.js里面引入注册自定义指令
// 自定义指令
import directives from "./directives/index";
Vue.use(directives);
第三步:vuex仓库里面存放后端接口返回的用于控制权限按钮的数组
vuex里面需要用到的三个文件,可根据自身需求进行添加:
user.js
import { userInfo } from "@/api/system/login";
//封装的统一存本地的方法,可自行添加
import { mySessionStorage } from "../../../utils/encryption";
const user = {
state: {
permissions: mySessionStorage.getItem("permissionArray") || [],
},
actions: {
// 获取用户信息
getUserInfo({ commit }) {
return new Promise(async (resolve, reject) => {
try {
const res = await userInfo();
if (res.code === 200) {
commit("SET_PERMISSION", res.data.authorities);
resolve(res);
} else {
reject(res);
}
} catch (error) {
reject(error);
}
});
},
},
mutations: {
SET_PERMISSION: (state, permission) => {
state.permission = permission || [];
//把获取到的路由存本地
mySessionStorage.setItem("permissionArray", state.permission);
},
},
};
export default user;
index.js
import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";
import getters from "./getters";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user,
},
getters,
});
export default store;
getters.js
const getters = {
permissions: (state) => state.Layout_store.permissions,
};
export default getters;
user.js里面的getUserInfo函数放在合适的地方调用,这里是放在登录页面:
关于页面使用:
关于页面操作按钮过多,固定展示两个,其他放入更多里面:
首先utils里面定义一个函数计算权限:
import store from "@/store";
// 校验权限
export const hasPermi = (arr) => {
return store.getters.permission.some((role) => {
return arr.includes(role);
});
};
页面使用:
import { hasPermi } from '@/util/util'
// 获取table数据
async getTableLists() {
this.loading = true
const params = {
...this.queryForm,
...this.form,
startTime: this.startTime,
endTime: this.endTime,
}
delete params.time
const res = await certificateList(params)
if (res.code === 200) {
this.tableData = res.data.records
this.tableData = res.data.records.map((item) => {
item.permissionList = []
if (hasPermi(['certificate_view'])) {
item.permissionList.push({ viewBtn: true })
}
if (hasPermi(['certificate_edit']) && item.issueSize == 0) {
item.permissionList.push({ editBtn: true })
}
if (hasPermi(['certificate_delete'])) {
item.permissionList.push({ deleteBtn: true })
}
if (hasPermi(['certificate_record'])) {
item.permissionList.push({ recordBtn: true })
}
return item
})
this.total = parseInt(res.data.total)
this.loading = false
} else {
this.$message.error(res.msg)
this.loading = false
}
},
html代码:
<el-table-column align="center" label="操作" fixed="right" width="200">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row.permissionList.length > 3
? scope.row.permissionList.slice(0, 2)
: scope.row.permissionList"
:key="index"
style="display: inline-block; margin-right: 10px;"
>
<el-button
v-if="item.viewBtn"
type="text"
@click="onView(scope.row)"
class="check-btn"
>
查看
</el-button>
<el-button
v-if="item.editBtn"
type="text"
@click="onEdit(scope.row)"
class="edit-btn"
>
编辑
</el-button>
<el-button
v-if="item.deleteBtn"
type="text"
@click="onDelete(scope.row.id)"
class="del-btn"
>
删除
</el-button>
<el-button
v-if="item.recordBtn"
type="text"
@click="onRecord(scope.row)"
class="check-btn"
>
发证记录
</el-button>
</div>
<el-dropdown v-if="scope.row.permissionList.length > 3">
<el-button type="text" size="medium" class="more-btn mr10">
更多
</el-button>
<el-dropdown-menu slot="dropdown">
<div
v-for="(item1, index1) in scope.row.permissionList.slice(2)"
:key="index1"
>
<el-dropdown-item v-if="item1.viewBtn">
<el-button
type="text"
@click="onView(scope.row)"
class="check-btn"
>
查看
</el-button>
</el-dropdown-item>
<el-dropdown-item v-if="item1.editBtn">
<el-button
type="text"
@click="onEdit(scope.row)"
class="edit-btn"
>
编辑
</el-button>
</el-dropdown-item>
<el-dropdown-item v-if="item1.deleteBtn">
<el-button
type="text"
@click="onDelete(scope.row.id)"
class="del-btn"
>
删除
</el-button>
</el-dropdown-item>
<el-dropdown-item v-if="item1.recordBtn">
<el-button
type="text"
@click="onRecord(scope.row)"
class="check-btn"
>
发证记录
</el-button>
</el-dropdown-item>
</div>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
完结!