如何在Vue中实现前端权限控制

1. 在utils中创建自定义指令文件（permissionDirect.js）

export const hasPermission = {
    install(Vue) {
        Vue.directive('hasPermission', {
            bind(el, binding, node) {
                var flag = false;//默认不显示
                let userInfo = node.context.$store.state.userInfoVO;
                //获取使用组件的value中
                var value = binding.value;
                //若是超级管理员
                let len = userInfo.permissions.length;
                for (let index = 0; index < len; index++) {
                    if (userInfo.permissions[index].permissionName === 'super_admin') {
                        flag = true;
                        break;
                    }
                }

                for (let index = 0; index < userInfo.permissions.length; index++) {
                    if (userInfo.permissions[index].permissionName == value) {
                        //若有该权限的按钮则显示
                        flag = true;
                    }

                }
                if (!flag) {
                    el.setAttribute("disabled", true);
                    el.classList.add("is-disabled");
                }
            }
        })
    }
}

2. 在main.js中进行引入

import {hasPermission} from './utils/permissionDirect'

const Plugins = [hasPermission]
Plugins.map((plugin)=>{
  Vue.use(plugin)
})

3. 完成上述步骤就可以在任意组件中进行使用

<!-- 通过判断该用户对应的角色是否有对应的权限来控制button是否可用 -->
<template slot-scope="scope">
              <el-button
                v-hasPermission="'log:login:delete'"
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row.loginRecordId)"
              >删除</el-button>
            </template>

扫码关注下方公众号，点击关注，获取详情信息，任何相关问题直接留言即可。