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

不念不忘少年蓝@ 2022-12-04 02:28 160阅读 0赞

# 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. 完成上述步骤就可以在任意组件中进行使用 #

<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>

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

![Alt][]

[Alt]: /images/20221123/b8c6f90038be4a73b8c93f8055c2627e.png