淘宝的网站开发历史及难度,佛山企业网站设计制作,广州网站建设制作,中国百科网vip钓鱼网站开发通过v-指令#xff0c;控制页面上的权限按钮的显示隐藏。首先是我的权限按钮数据#xff0c;通过登录接口后端返回#xff0c;前端将数据存在vuex里#xff0c;在调用指令时候获取到当前页面对应的按钮权限数组#xff0c;通过v-指令传递标识判断是否在当前页按钮权限数组… 通过v-指令控制页面上的权限按钮的显示隐藏。首先是我的权限按钮数据通过登录接口后端返回前端将数据存在vuex里在调用指令时候获取到当前页面对应的按钮权限数组通过v-指令传递标识判断是否在当前页按钮权限数组里有则显示无则隐藏。 借鉴博客
一、封装组件
在 src 目录下新建 directive 目录在目录下新建 permission.js 文件
以下代码可直接复制注意使用了store
// import Vue from vue
import store from /store
import router from /router// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export default {install(Vue) {Vue.directive(permission, {/*** inserted被绑定元素插入父节点时调用* el指令所绑定的元素可以用来直接操作 DOM* binding.value指令的绑定值例如v-directive10 中绑定值为 10。*/inserted(el, binding) {// 使用Vue.nextTick()确保在DOM更新后执行操作--解决不更新DOM问题Vue.nextTick(function() {let lastColumns [] // 获取该角色当前页的按钮列表// 在Vue Router加载完成后执行获取路由参数的操作let pagePathrouter.onReady(() {pagePath router.currentRoute.path // 当前路由// console.log(pagePath, pagePath)// console.log(store, store.getters[system/systemConfig]) // 获取vuex里面的后端登录返回的页面权限按钮数组arrList// 从vuex里获取所有页面权限按钮关系数据arrList const arrList [{ path: /defectManagement/defectRecord, btnList: [add] },{ path: /defectManagement/defectMaintenance, btnList: [add, edit, delete] },{ path: /normalPenetratTest/penetratResult/asset, btnList: [add, detail, edit, delete, upload, highlight] },{ path: /normalPenetratTest/penetratResult/loophole, btnList: [detail, edit, delete] }]arrList.forEach(ele {if (ele.path pagePath) {lastColumns ele.btnList || [] // 获取当前路由下的角色的按钮}})// console.log(获取当前路由下的角色的权限按钮数组, lastColumns)// 执行指令的操作const buttonKey binding.value// 代表某个元素需要通过权限验证if (buttonKey) {const key checkKey(lastColumns, buttonKey)console.log(指令触发了, lastColumns, checkKey(lastColumns, buttonKey))if (!key) { // 没有权限el.remove() // 删除按钮}} else {throw new Error(缺少唯一指令)}})})}})}
}// 检测传入的元素key是否可以显示
function checkKey(lastColumns, key) {// 如果传入的元素key不在权限数组里则不可显示return lastColumns.indexOf(key) -1
}// a-button v-permissiondelete typeprimary删除/a-button
二、引入组件和使用
1.在入口文件 src\main.js 里面引入自定义指令import permission ./directive/permission
Vue.use(permission)2.在使用的页面按钮中只需引用v-operate指令赋值判断即可el-button clickdelHandle typeprimary v-permissiondelete删除/el-button
