前端朋友遇到项目中的一个问题,就是需要根据后台接口返回的数据,来判断当前用户的操作权限。比如有删除权限,就显示对应的删除按钮,没有这个权限,就置为不可点击状态,或者就是直接隐藏。
作为一个后台开发工作者来讲,对于前端的一个技术,涉猎并不是很深,只能通过官方文档或者百度先简单了解下。经过一系列的调查 得知,想实现这么一个功能,比较简单的就是使用VUE中的状态管理(有没有其他更好的方法,暂时还不知道),一些基本的东西我还知道点。状态管理? 只听过,没用过。经过一段时间的调查 测试,终于实现了基于状态管理 按钮级别的权限控制。
先看下不同权限在页面上的显示情况,为了更好的表示,此事例对于没有权限的按钮采用禁用的方式。
接下来看具体的实现步骤:
1、首先在src目录下创建 store 文件夹,然后在 store 文件加下创建 index.js 文件,index.js内容如下:
// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex);
//创建vue实例
const store = new Vuex.Store({
state:{
// 设置属性,用于保存后台接口返回的权限数据
permission:[]
}
})
//导出store
export default store
2、然后在 main.js 中导入 store/index.js 文以供全局使用
import Vue from 'vue'
import store from './store/index.js'
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount('#app')
3、此时我们已经把需要的东西准备好了,那么如何将接口中获取的数据存到store中呢?接下来就要开始修改 store/index.js 文件:
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex);
//创建vue实例
const store = new Vuex.Store({
state:{
permission:[]
},
mutations:{
SET_PERMISSION(state,permission){//permission 为传入的权限标识集合
// 传入的权限集合 赋值给状态中的 permission
state.permission = permission;
}
},
actions:{// 官方不推荐直接修改mutation, 可使用actions来提交 mutation
SET_PERMISSION(context,permission){
// 提交到 mutation 中的 SET_PERMISSION 函数
context.commit("SET_PERMISSION",permission);
}
}
})
//导出store
export default store
4、接下来我就该把从接口获取的数据提交到状态管理中,因为只做为测试,所以没有真正的接口,此处使用模拟数据代替,具体如下:
methods:{
getPermission(){ // 模拟接口 获取 权限数据集合
// 模拟获取的数据 有以下几个权限
let perms = ['search','view','edit','delete'];
// 用于把权限集合提交到 actions 中的 SET_PERMISSION 函数
// 第一个为函数名,后面的参数为 我们需要提交的参数,可以是多个
this.$store.dispatch("SET_PERMISSION",perms);
}
}
截止到此,我们已经完成了权限的存储。接下来就该如何使用我们存在store中的权限集合来控制按钮的是否可用。
5、首先我们创建 src/permission/index.js 文件 index.js 文件用于判断 按钮所需要的权限是否存在与 store 中,内容如下:
import store from '@/store/index.js'
/**
* 判断是否有权限。根据传入的权限标识,查看是否存在于用户的权限标识集合内。
*/
export function hasPermission (perms) {
let hasPermission = false;
let permission = store.state.permission;
for (var i = 0; i < permission.length; i++) {
if(permission[i] === perms){
hasPermission = true;
break;
}
}
return hasPermission;
}
6、为了更好的实现功能,我们创建一个按钮组件,所有需要权限控制的按钮我们都用这个组件来替代,创建文件 src/permission/ktButton.vue 内容如下:
<template>
<el-button :size="size" :type="type"
:loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
{
{label}}
</el-button>
</template>
<script>
// 禁用标识
// :disabled="!hasPerms(perms)"
import { hasPermission } from '@/permission/index.js'
export default {
name: 'KtButton',
props: {
label: { // 按钮显示文本
type: String,
default: 'Button'
},
size: { // 按钮尺寸
type: String,
default: 'mini'
},
type: { // 按钮类型
type: String,
default: null
},
loading: { // 按钮加载标识
type: Boolean,
default: false
},
disabled: { // 按钮是否禁用
type: Boolean,
default: false
},
perms: { // 按钮权限标识,外部使用者传入
type: String,
default: null
}
},
data() {
return {
}
},
methods: {
handleClick: function () {
// 按钮操作处理函数
this.$emit('click', {})
},
hasPerms: function (perms) {
// 根据权限标识和外部指示状态进行权限判断
return hasPermission(perms) //& !this.disabled
}
},
mounted() {
}
}
</script>
以上内容中 props 为传值问题,需要什么属性 可自行添加,关于父子组件的传值可参考另一篇博文VUE脚手架搭建+Element 组件库table
对于没有权限的按钮是需要不可点击 还是 隐藏状态,只需要把 :disabled 换成 v-if 即可。由于我们的权限不仅限于一个页面,所以需要我们把按钮组件注册到全局,以便其他页面直接使用 而无需再次引入。在 main.js 添加以下内容 :
// 按钮组件 全局使用
import KtButton from '@/permission/ktButton.vue'
Vue.component("KtButton",KtButton);
7、接下来我们就可以直接在需要进行权限控制的页面直接使用 该组件,如 我在 UserList 页面的操作栏使用:
首先在操作栏 添加相应的 按钮 及权限标识
<el-table-column label="操作" width="360">
<template slot-scope="scope">
<KtButton size="mini" @click="handleSelect(scope.$index,scope.row)" label='查看' perms='view' type="primary"/>
<KtButton size="mini" @click="handleUpdate(scope.$index,scope.row)" label='编辑' perms='edit' type="primary"/>
<KtButton size="mini" @click="handleDelete(scope.$index,scope.row)" label='删除' perms='delete' type="danger"/>
</template>
</el-table-column>
以上 perms 为该按钮 对应的权限标识。由于在 按钮组件中 有一个函数 hasPerms 来判断 是否有权限,所以我们需要在此页面上添加此方法,传入对应的权限标识来判断是否有此权限。
methods:{
hasPerms: function (perms) {
// 根据权限标识和外部指示状态进行权限判断
return hasPermission(perms)
},
getPermission(){ // 模拟接口 获取 权限数据集合
let perms = ['search','view','edit','delete'];
this.$store.dispatch("SET_PERMISSION",perms);
}
}
此处的 perms 参数 就是 按钮组件中的 perms='edit' 中的 edit 。那么接下来我们看看页面效果:
由于 之前设置的 权限 是全都有的,所以现在看到的是全部都是可以点击的状态。那么接下来 我们试一下把模拟接口获取的权限集合只保留编辑,操作如下:
getPermission(){ // 模拟接口 获取 权限数据集合
let perms = ['edit'];
this.$store.dispatch("SET_PERMISSION",perms);
},
此时我们再来看看 按钮的状态:
可以看到 我把 查看、删除及搜索的权限全都去掉之后,刷新页面 这三个按钮全都边为了不可点击的状态。说明我们需要实现的按钮权限已经实现。
实现起来还是挺简单的,但是实现的过程却不简单。所以在遇到问题的时候一定要多查阅资料,才能更好的帮助我们解决问题!!!
文章浏览阅读1.5w次,点赞10次,收藏129次。文章目录目录模型评估评价指标1.分类评价指标acc、recall、F1、混淆矩阵、分类综合报告1.准确率方式一:accuracy_score方式二:metrics2.召回率3.F1分数4.混淆矩阵5.分类报告6.kappa scoreROC1.ROC计算2.ROC曲线3.具体实例2.回归评价指标3.聚类评价指标1.Adjusted Rand index 调整兰德系数2.Mutual Informa..._model.score
文章浏览阅读344次。因工作需要,在Apache上使用,重新学习配置mod_jk1. 分别安装Apache和Tomcat:2. 编辑httpd-vhosts.conf: LoadModule jk_module modules/mod_jk.so #加载mod_jk模块 JkWorkersFile conf/workers.properties #添加worker信息 JkLogFil_apache mod_jk 虚拟
文章浏览阅读335次。待老夫kotlin大成,扩展:MotionLayout 与 CoordinatorLayout,DrawerLayout,ViewPager 的 交互众所周知,MotionLayout 的 动画是有完成度的 即Progress ,他在0-1之间变化,一.CoordinatorLayout 与AppBarLayout 交互时,其实就是监听 offsetliner 这个 偏移量的变化 同样..._android onoffsetchanged
文章浏览阅读8.3k次,点赞3次,收藏19次。【转】多核处理器的工作原理及优缺点《处理器关于多核概念与区别 多核处理器工作原理及优缺点》原文传送门 摘要:目前关于处理器的单核、双核和多核已经得到了普遍的运用,今天我们主要说说关于多核处理器的一些相关概念,它的工作与那里以及优缺点而展开的分析。1、多核处理器 多核处理器是指在一枚处理器中集成两个或多个完整的计算引擎(内核),此时处理器能支持系统总线上的多个处理器,由总..._多核处理器怎么工作
文章浏览阅读306次。1. eclipse配置lombok 拷贝lombok.jar到eclipse.ini同级文件夹下,编辑eclipse.ini文件,添加: -javaagent:lombok.jar2. myeclipse配置lombok myeclipse像eclipse配置后,定义对象后,直接访问方法,可能会出现飘红的报错。 如果出现报错,可按照以下方式解决。 ..._eclispe每次运行个新项目都需要重新配置lombok吗
文章浏览阅读1.2w次,点赞31次,收藏126次。#注意:笔者在2021/11/11当天调试过这个代码是可用的,由于pdfminer版本的更新,网络上大多数的语法没有更新,我也是找了好久的文章才修正了我的代码,仅供学习参考。1、把pdf文件移动到本代码文件的同一个目录下,笔者是在pycharm里面运行的项目,下图中的x1文件夹存储了我需要转换成文本文件的所有pdf文件。然后要在此目录下创建一个存放转换后的txt文件的文件夹,如图中的txt文件夹。2、编写代码 (1)导入所需库# coding:utf-8import ..._python批量读取文字并批量保存
文章浏览阅读4.3k次。vite在开发阶段采用的是按需加载的方式,不会将所有文件打包。但是生产环境的部署是需要进行打包的,这里它使用的是rollup打包方式。对于代码切割的需求,使用原生动态导入,因此打包后支持新浏览器,对IE的兼容性不是很好,但是可以用对应的polyfill解决。使用esbuild来处理需要pre-undle的在cli.ts的build命令中引入build.ts调用doBuild方法,在这个方法中配置打包参数(input output plugin等)调用buildHtmlPlugin解析文件入口in_vite build
文章浏览阅读1.4k次。http://blog.csdn.net/pipisorry/article/details/52902234Scala 访问修饰符Scala 访问修饰符基本和Java的一样,分别有:private,protected,public。如果没有指定访问修饰符符,默认情况下,Scala对象的访问级别都是 public。Scala 中的 private 限定符,比 Java 更严格,在嵌套类情况下,外层_scala ===运算符
文章浏览阅读2.6k次,点赞7次,收藏19次。ER图导出为PDF或图片格式_数据库怎么导出er图
文章浏览阅读655次。CREATE OR REPLACE TRIGGER Trg_ReimFactBEFORE UPDATEON BP_OrderFOR EACH ROWDECLAREPRAGMA AUTONOMOUS_TRANSACTION;--自制事务fc varchar2(255);BEGINIF ( :NEW.orderstate = 2AND :NEW.TransState = 1 ) THENBEG..._oracle触发器更新同一张表
文章浏览阅读513次。目录概念debouncethrottle实现debouncethrottle应用场景debouncethrottle场景举例debouncethrottle概念debounce字面理解是“防抖”,何谓“防抖”,就是连续操作结束后再执行,以网页滚动为例,debounce要等到用户停止滚动后才执行,将连续多次执行合并为一次执行。throttle字面理解是“节流”,何谓“节流”,就是确保一段时..._throttle和debounce应用在哪些场景
文章浏览阅读526次。regex() $regex 正则表达式用于模式匹配,基本上是用于文档中的发现字符串 (下面有例子)注意:若未加 @Field("名称") ,则识别mongdb集合中的key名为实体类属性名。也可以对数组进行索引,如果被索引的列是数组时,MongoDB会索引这个数组中的每一个元素。也可以对整个Document进行索引,排序是预定义的按插入BSON数据的先后升序排列。save: 若新增数据的主键已经存在,则会对当前已经存在的数据进行修改操作。_java 操作mongodb