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

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

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>

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

相关推荐
泯泷4 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
球求了7 分钟前
C++:继承机制详解
开发语言·c++·学习
抹茶san7 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
张槊哲29 分钟前
函数的定义与使用(python)
开发语言·python
Senar34 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
北辰浮光38 分钟前
[Mybatis-plus]
java·开发语言·mybatis
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
光而不耀@lgy1 小时前
C++初登门槛
linux·开发语言·网络·c++·后端