vue中按钮权限的实现

---

前言

按钮权限的实现；
技术栈vue2+localstorage

---

一、代码及说明

1.实现思路

这里默认后端返回的按钮权限格式为 ：
前面是菜单，后面的数组是该菜单对应的按钮；同样的菜单权限也可以按照此思路进行实现
1，把用户的菜单按钮信息存储到localstorage中；2，在对应的页面加载之前获取该页面的name以及按钮权限；3，给需要加权限的按钮绑定v-has属性；4，在main.js中注册自定义指令v-has

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; // 获取指令的值
    // 从 localStorage 中获取用户权限
    const userPermissions = (JSON.parse(localStorage.getItem('userInfoAuth')))[currentPage] || [];
    // 检查是否有权限
    if (!userPermissions.includes(permission)) {
      el.parentNode && el.parentNode.removeChild(el); // 没有权限则移除元素
    }
  },
});
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

2.存储用户权限

getUserInfo() {
      const usreInfo = {
        permission_demo: ["btn1", "btn2", "btn3", "btn4", "btn5"],
      };
      localStorage.setItem("userInfoAuth", JSON.stringify(usreInfo));
    },

3.使用

<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>
export default {
  name: 'permission_demo',
  data() {
    return {
      hasbtn:[]
    }
  },
  mounted(){
  },
  methods: {
    btn1Click(){

    },
  },
}
</script>
<style scoped>

</style>

4.效果

---

总结

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