Vue多页面 按钮级别权限控制 directive指令控制
Posted tsxylhs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue多页面 按钮级别权限控制 directive指令控制相关的知识,希望对你有一定的参考价值。
利用driective 构建自己的指令,实现按钮级别权限
项目结构如下:
修改router.js
{ path: ‘schools‘, name: ‘列表‘, component: () => import(‘./eduAdministration/SchoolList‘), meta: { permissions: [‘schools‘], btnpermissions:[‘admin‘,‘test‘], title: ‘列表‘, icon: ‘‘, scrollToTop: true } },
新建文件 btnPermission.js文件
内容如下
import Vue from ‘vue‘ import store from ‘../index‘ /**权限指令**/ const has = Vue.directive(‘has‘, { bind: function (el, binding, vnode) { // 获取按钮权限 let Permissions = vnode.context.$route.meta.btnpermissions; console.log(‘permission‘,Permissions) if (!Vue.prototype.$_has(Permissions)) { let className=el.getAttribute("class") className=className.concat(" hidden") el.setAttribute("class",className) } } }); // 权限检查方法 Vue.prototype.$_has = function (value) { let isExist = false; debugger let PermissionsStr =store.getters.roles; if (PermissionsStr == undefined || PermissionsStr == null) { return false; } PermissionsStr.forEach((per)=>{ if (value.indexOf(per) > -1) { isExist = true; } }) return isExist; }; export {has}
将文件引入index.js
import Vue from ‘vue‘ import Vuex from ‘vuex‘ import app from ‘./modules/app‘ import user from ‘./modules/user‘ import getters from ‘./getters‘ import permission from ‘./modules/permission‘ import has from ‘./modules/btnPermission‘ Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, user, permission }, getters }) export default store
页面添加权限
el-button(size=‘mini‘ @click="handleEdit(scope.row)" v-has) 编辑
最后一步
在 css中添加hidden样式
<style scoped>
.hidden {
display:none;
}
</style>
大功告成
以上是关于Vue多页面 按钮级别权限控制 directive指令控制的主要内容,如果未能解决你的问题,请参考以下文章
「Vue面试题」vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?