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

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

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>

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

相关推荐
nbsaas-boot1 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7891 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨1 小时前
GO 启动 简单服务
开发语言·后端·golang
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
斯普信专业组1 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构