vue 项目按钮权限判断

前言：

如果判断条件少的情况使用v-if / v-show，来判断该用户是否有权限，

如果判断条件多就会繁琐，因此可以封装一个指令权限实现按钮级别的权限判断。

实现：

1、新建一个js文件，buttonRole.js,用于存放和权限相关的全局函数。

export function checkButtonRole (key) {

        let arr = ['role', 'admin'];

        let index = arr.indexOf(key)

        if (index > -1) {

                return true; // 有权限

        } else {

                return false; // 无权限

        }

}

2、在main.js文件中挂载

 import { buttonRole } from "./common/buttonRole";
 Vue.config.productionTip = false;
 Vue.directive("permission", {
           inserted (el, binding) {
            let permission = binding.value; // 获取到 v-permission的值
            if (permission) {
                  let hasPermission = buttonRole(permission);
                  if (!hasPermission) { // 没有权限 移除Dom元素
                        el.parentNode && el.parentNode.removeChild(el);
                   }
    }
  }
});

 3、最后在需要用的页面中使用

     <div>
            <button v-permission="'admin'">权限按钮1</button>  // 会显示
            <button v-permission="'edit">权限按钮2</button> //无显示
     </div>