怎么对前端的一些按钮做一个权限校验

在一般情况下,我们需要对一些按钮做一个权限校验,来保证只有有权限的用户才能看到

1.创建一个js文件,来写我们的全局方法

我的方法是这样的

复制代码
import Vue from 'vue';

Vue.mixin({
    methods:{
        hasAuth(perm) {
            var authority = this.$store.state.menu.permList;
            if (authority.indexOf(perm) > -1) {
                return true;
            } else {
                // this.$message.error('没有权限');
                return false;
            }
        },
    }

});

2.在main.js中引入

复制代码
import global from "./globalFun";

3.就可以在你想要使用方法的按钮上使用了

复制代码
    <el-form-item>
        <el-button type="primary" @click="dialogVisible=true" v-if="hasAuth('sys:user:save')">新增</el-button>
      </el-form-item>

这样当用户没有这个权限的时候,这个按钮不会进行显示

相关推荐
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_1 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏1 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
斐波娜娜1 小时前
Maven详解
java·开发语言·maven