vue2按钮权限控制

简介

在 Vue 2 中，如果你想要实现基于权限的控制，比如通过 v-permission=“[‘sys:user:add’]” 来控制某个组件或元素的显示或隐藏，你需要自定义一个指令来实现这个功能。Vue 2 不直接支持类似 Vue 3 中的指令功能，但你可以通过创建一个全局指令来达到类似的效果。

第一种方式

处理思路

菜单分为两种类型，菜单和按钮，用角色来控制菜单，用v-premission来控制按钮，实现菜单和按钮的权限控制，登录时将菜单和按钮分开返回，分别进行处理。

permission.js

directives/permission.js

import store from '@/store'

export default {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.getters.getPermission
    console.log("权限",permissions)

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = permissions.some(perm => {
        return value.includes(perm)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限标识! 如 v-permission="['sys:user:add']"`)
    }
  }
}

在main.js中引入注册

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
import store from './store'
import permission from './directives/permission'

Vue.use(ElementUI)
Vue.directive('permission',permission)

Vue.config.productionTip = false

new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

对需要控制的按钮添加v-permission

<el-button type="primary" v-permission="['sys:user:add']" @click="handleAdd">新增</el-button>

至此便实现按钮级别的权限控制

第二种方式

创建自定义指令

首先，你需要创建一个自定义指令，这个指令会检查用户是否有特定的权限。

// 在你的 Vue 实例创建之前定义
Vue.directive('permission', {
  bind(el, binding) {
    const { value } = binding;
    const allPermissions = value; // 例如 ['sys:user:add']
    const hasPermission = checkPermission(allPermissions); // 假设这是你的权限检查函数
 
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el); // 如果无权限，移除元素
    }
  }
});

 
function checkPermission(permissions) {
  // 这里需要根据实际情况实现权限检查逻辑
  // 例如，你可以从全局状态管理（如 Vuex）中获取当前用户的权限列表，然后检查是否包含在传入列表中
  // 示例实现（需要根据实际情况调整）:
  const userPermissions = ['sys:user:add', 'sys:user:delete']; // 示例权限列表，应从实际用户状态获取
  return permissions.every(perm => userPermissions.includes(perm));
}

main.js中需要引入

使用自定义指令

现在你可以在你的 Vue 组件中使用这个自定义指令了。

<template>
  <div v-permission="['sys:user:add']">
    <!-- 只有当用户有 'sys:user:add' 权限时，此内容才会显示 -->
    <button>添加用户</button>
  </div>
</template>

确保权限数据正确加载

确保在组件渲染前，权限数据已经加载并正确设置。通常这意味着你需要在组件的 created 或 mounted 钩子中调用获取权限数据的函数。

export default {
  created() {
    this.fetchPermissions(); // 例如，从 API 获取当前用户的权限列表
  },
  methods: {
    fetchPermissions() {
      // 实现获取权限的逻辑，例如从 Vuex 或 API 获取权限列表
      // 并更新到全局状态中供 checkPermission 使用
    }
  }
}

注意：
确保在调用 checkPermission 时，用户的权限列表已经可用。通常这意味着你应该在组件初始化时（如 created 或 mounted 钩子中）获取这些数据。

如果你的应用使用了 Vuex 来管理状态，确保权限数据存储在 Vuex 中，并在检查权限时从 Vuex 中获取这些数据。

如果元素需要频繁地根据权限显示或隐藏，考虑使用计算属性或观察者来动态绑定样式或类，而不是完全移除元素。这样可以避免频繁地操作 DOM，提高性能。例如：

computed: {
  showElement() {
    return checkPermission(['sys:user:add']); // 根据权限返回 true 或 false
  }
}

然后在模板中使用：v-if="showElement"