前端如何实现根据权限控制隐藏元素，两种解决思路：组件插槽和vue指令

序言

前端如何实现根据权限控制隐藏元素，接下来给出两种解决思路：组件插槽和vue指令

组件插槽

定义一个Authority的组件：利用slot代替要判断的元素块，permissions代表要传入的权限范围，showSlot代表是否显示(为true显示)

<template>
  <div>
    <slot v-if="showSlot" :userPermissions="permissions"></slot>
  </div>
</template>

<script>
import store from '@/store'
import checkAccess from '@/access/checkAccess'
import ACCESS_ENUM from '@/access/accessEnum'

export default {
  components: {},
  props: {
    permissions: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {}
  },
  computed: {
    showSlot() {
      let loginUser = store.state.user.loginUser
      // 判断是否有权限
      if (checkAccess(loginUser, ACCESS_ENUM.ADMIN)) {
        return true
      }
      if (!loginUser.userRole || !this.permissions.includes(loginUser.userRole)) {
        return false
      }
      return true
    },
  },
  methods: {},
}
</script>

<style scoped></style>

使用：

    <Authority :permissions="['admin','user']">
      <p>权限可见标签</p>
    </Authority>

vue指令

利用自定义vue指令实现权限控制

main.js

import directives from './directive/index'

Vue.use(directives)   // 自定义指令

directive/index

import hasRole from './permission/hasRole'

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

export default install

/permission/hasRole.js

import store from '@/store'
import ACCESS_ENUM from '@/access/accessEnum'
import checkAccess from '@/access/checkAccess'

/**
 * v-role 角色权限
 * @example: v-role="['admin','user']"
 */
export default {
  inserted(el, binding) {
    const { value } = binding
    let loginUser = store.state.user.loginUser

    if (Array.isArray(value) && value.length > 0) {
      const roles = value

      const hasRole = () => {
        if (checkAccess(loginUser, ACCESS_ENUM.ADMIN)) {
          return true
        }
        if (!loginUser.userRole || !roles.includes(loginUser.userRole)) {
          return false
        }
        return true
      }

      if (!hasRole()) {
        el.parentNode?.removeChild(el)
      }
    }
  },
}

使用

<p v-role="['admin','user']">权限可见标签</p>