Vue v-has 前端权限控制

发请求获取到权限,然后存储在localStorage中

创建hasPermission.js v-has-Permission

import Vue from 'vue';

//判断是否有权限
// 注册一个全局自定义指令 `v-has-Permission`
const hasPermission = Vue.directive('hasPermission', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el, binding) {
        //getItem 把存储在本地的权限取出
        let PermissionArr = JSON.parse(localStorage.getItem('hasPermission'))
        //默认无权限
        let isExist = false;
        //some 检测数组中的元素是否满足指定条件
        PermissionArr.some(function (permissionItem) {
            //本地的权限字段
            let permissionStr = permissionItem.name;
            //当前指令的绑定值
            binding.value.forEach(function (item) {
                //startsWith 判断字符串是否以固定数据开头
                if (permissionStr.startsWith(item)) {
                    isExist = true
                }
            });
        });

        //没有权限则移除
        if (!isExist && el.parentNode) {
            el.parentNode.removeChild(el)
        }
    }
})

export default { hasPermission }

main.js中引入注册 hasPermission.js

使用v-has指令

<div v-has-permission="['权限字段']">我是一个按钮</div>

参考 blog.csdn.net/weixin_4491…