网站设计尺寸大小,漯河做网站的,聊城做网站最好的网络公司,济南做网站比较好的公司第一步:在src下面建立一个自定义指令文件,放自定义指令方法 permission.js文件:
/*** v-hasPermi 操作权限处理*/import store from /store;export default {inserted(el, binding) {const { value } binding;//从仓库里面获取到后台给的数组const permission s…第一步:在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 ./permissionconst 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 aligncenter label操作 fixedright width200template slot-scopescopedivv-for(item, index) in scope.row.permissionList.length 3? scope.row.permissionList.slice(0, 2): scope.row.permissionList:keyindexstyledisplay: inline-block; margin-right: 10px;el-buttonv-ifitem.viewBtntypetextclickonView(scope.row)classcheck-btn查看/el-buttonel-buttonv-ifitem.editBtntypetextclickonEdit(scope.row)classedit-btn编辑/el-buttonel-buttonv-ifitem.deleteBtntypetextclickonDelete(scope.row.id)classdel-btn删除/el-buttonel-buttonv-ifitem.recordBtntypetextclickonRecord(scope.row)classcheck-btn发证记录/el-button/divel-dropdown v-ifscope.row.permissionList.length 3el-button typetext sizemedium classmore-btn mr10更多/el-buttonel-dropdown-menu slotdropdowndivv-for(item1, index1) in scope.row.permissionList.slice(2):keyindex1el-dropdown-item v-ifitem1.viewBtnel-buttontypetextclickonView(scope.row)classcheck-btn查看/el-button/el-dropdown-itemel-dropdown-item v-ifitem1.editBtnel-buttontypetextclickonEdit(scope.row)classedit-btn编辑/el-button/el-dropdown-itemel-dropdown-item v-ifitem1.deleteBtnel-buttontypetextclickonDelete(scope.row.id)classdel-btn删除/el-button/el-dropdown-itemel-dropdown-item v-ifitem1.recordBtnel-buttontypetextclickonRecord(scope.row)classcheck-btn发证记录/el-button/el-dropdown-item/div/el-dropdown-menu/el-dropdown/template/el-table-column 完结!
