vue2按钮权限的实现（vue2+vuex）

---

前言

按钮权限的实现；
技术栈：vue2+vuex+elementui，这里用vuex进行存储各个页面的按钮权限；PS（更建议用localstorage存储用户的基本信息和按钮权限）

---

一、代码及说明

1.实现思路

这里默认后端返回的按钮权限格式为 ：如下图所示

2.main.js

代码如下（示例）：

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

Vue.config.productionTip = false;
Vue.use(ElementUI);
// 注册自定义指令 v-has
Vue.directive('has', {
  inserted(el, binding, vnode) {
    // 获取当前组件的名称
    const currentPage = vnode.context.$options.name;
    const permission = binding.value; // 获取指令的值

    // 从 Vuex 中获取当前页面的权限
    const userPermissions = store.getters.getUser[currentPage];
    console.log(userPermissions,'userPermissionsuserPermissionsuserPermissions');
    
    // 检查是否有权限
    if (!userPermissions.includes(permission)) {
      el.parentNode && el.parentNode.removeChild(el); // 没有权限则移除元素
    }
  },
});
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

2.vuex中的代码

代码如下（示例）：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null, // 用于存储用户信息
  },
  mutations: {
    setUser(state, user) {
      state.user = user; // 更新用户信息
    },
  },
  actions: {
    fetchUser({ commit }, userInfo) {
      // 这里直接使用传入的 userInfo
      return new Promise((resolve) => {
        // 模拟 API 请求
        setTimeout(() => {
          commit('setUser', userInfo); // 提交 mutation 更新状态
          resolve(userInfo); // 返回用户信息
        }, 1000);
      });
    },
  },
  getters: {
    isAdmin(state) {
      return state.user && state.user.role === 'admin'; // 判断是否为管理员
    },
    getUser: (state) => {
        return state.user;
    },
  },
});

3.给vuex中赋值。

getUserInfo() {
      const usreInfo = {
        permission_demo: ["btn1", "btn2", "btn3", "btn4", "btn5"],
      };
      console.log(usreInfo, "11111111");

      this.fetchUser(usreInfo)
        .then(() => {})
        .catch(() => {});
    },

4.使用

<template>
    <div class="main">
        <div style="margin-bottom: 20px;">权限测试代码</div>
        <el-button type="primary" @click="btn1Click" v-has="`btn1`">btn1</el-button>
        <el-button type="danger" v-has="`btn2`">btn2</el-button>
        <el-button type="warning" v-has="`btn3`">btn3</el-button>
        <el-button type="info" v-has="`btn4`">btn4</el-button>
        <el-button type="success" v-has="`btn5`">btn5</el-button>
        <el-button type="success" v-has="`btn6`">btn6</el-button>
        <el-button type="success">btn7</el-button>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'permission_demo',
  data() {
    return {
      hasbtn:[]
    }
  },
  mounted(){
    console.log(this.user,'this.userthis.userthis.user');
    console.log(this.$options.name, '组件名称')
  },
  methods: {
    btn1Click() {
      console.log(this.user,'this.userthis.userthis.user');
    }
  },
  computed: {
    ...mapState(['user']), // 映射 user 状态
  }
}
</script>
<style scoped>

</style>

5.效果

---

总结

这样一个完整的按钮权限配置就完成了