1,明确后台返回的按钮权限格式,我这边的格式是:
permissionBtn:["infoAdd","infoExport","infoDel"]
2,在登录的时候将数据存放在状态管理里面去:
commit('PERMISSION_BTN', permissionBtn)
当然,这是在登陆后查询用户的情况下获取的,如果你是在登录的时候获取的,得把数据存在本地。否则的话,页面刷新存放在vuex里面的权限列表会被格式化。存放数据如下:
setStorage('PermissionBtn', JSON.stringify(permissionBtn))
3,创建一个hasPermission.js文件,里面内容如下:
import Vue from 'vue' import store from '@/store' // import { getStorage } from '@/utils/storage' const permissionBtn = Vue.directive('per', { inserted: function (el, binding, vnode) { if (!Vue.prototype.$PERMISSION(binding.value)) { el.remove() } } }) Vue.prototype.$PERMISSION = function (value) { let isPermission = false const buttonPermission = store.state.user.permissionBtn // 存放在vuex的写法 // const buttonPermission = getStorage('PermissionList') // 存放在本地存储的写法 if (buttonPermission === undefined || buttonPermission === null) { return false } try { const targetArr = value.split(',') for (let i = 0; i < targetArr.length; i++) { if (buttonPermission.includes(targetArr[i])) { isPermission = true break } } return isPermission } catch { console.log('error') isPermission = false return isPermission } } export { permissionBtn }
4,在main.js中引入,引入地址依情况而定。
import './hasPermissionbtn'
5,直接在页面中使用,可以在任何标签中使用:
<btn buttonname='按钮' v-per="'infoAdd'" />
如果是多个权限或控制按钮时通过 “,”隔开v-per=" 'infoAdd,infoedit ' ",表示权限里面有"infoAdd"或者"infoedit"都显示该按钮。