自定义权限指令

web守航者

已于 2024-04-09 14:32:01 修改

阅读量326

点赞数 9

文章标签： vue.js javascript ecmascript

于 2024-01-09 15:55:14 首次发布

本文链接：https://blog.csdn.net/weixin_48022484/article/details/135482564

版权

本文介绍了如何在Vue应用中实现一个自定义权限指令，通过检查用户角色是否具有特定权限来控制组件的显示。代码展示了`permission.js`和`index.js`中的关键逻辑，包括从localStorage和sessionStorage获取角色信息以及指令的插入和更新功能。

摘要由CSDN通过智能技术生成

自定义权限指令

目录结构

// permission.js 

function checkPermission(el, binding) {
  const { value } = binding
  const roles = JSON.parse(localStorage.getItem('roles'))
  const appRole = sessionStorage.getItem('appRole')
  if (value && value instanceof Array) {
    if (value.length > 0) {
      const permissionRoles = value 
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role.rolename) || permissionRoles.includes(appRole)
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  } else {
    throw new Error(`need roles! Like v-has="['TenantAdmin','CmAdmin']"`)
  }
}

export default {
  inserted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  }
}


// index.js

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install)
}

permission.install = install
export default permission