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

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

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>

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

相关推荐
Simon_He12 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
喝可乐的布偶猫17 分钟前
韩顺平之第九章综合练习-----------房屋出租管理系统
java·开发语言·ide·eclipse
江山如画,佳人北望37 分钟前
C#程序入门
开发语言·windows·c#
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能