vue 按钮权限

1.//main.js

import {has} from './common/btnPermission.js'

2.//btnPermission.js

3.路由页，

meta:{

            title:"路由标题",

            btnPermissions:['admin']

        }

4. <span v-has>权限按钮</span>

//登录的时候获取权限

let role = "admin"

    sessionStorage.setItem("btnPermissions",role);

//btnPermission.js

import Vue from 'vue'

// /**权限指令**/

const has = Vue.directive('has', { inserted: function (el, binding, vnode) {

// 获取页面按钮权限

let btnPermissionsArr = []; if(binding.value){

// 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。

btnPermissionsArr = Array.of(binding.value); }else{

// 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。

btnPermissionsArr = vnode.context.$route.meta.btnPermissions; } if (!Vue.prototype.$_has(btnPermissionsArr)) { el.parentNode.removeChild(el); } }});

// 权限检查方法

Vue.prototype.$_has = function (value) { let isExist = false;

// 获取用户按钮权限

let btnPermissionsStr = sessionStorage.getItem("btnPermissions"); if (btnPermissionsStr == undefined || btnPermissionsStr == null) { return false; } if (value.indexOf(btnPermissionsStr) > -1) { isExist = true; } return isExist;};export {has}