前端朋友遇到项目中的一个问题,就是需要根据后台接口返回的数据,来判断当前用户的操作权限。比如有删除权限,就显示对应的删除按钮,没有这个权限,就置为不可点击状态,或者就是直接隐藏。
作为一个后台开发工作者来讲,对于前端的一个技术,涉猎并不是很深,只能通过官方文档或者百度先简单了解下。经过一系列的调查 得知,想实现这么一个功能,比较简单的就是使用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);
},
此时我们再来看看 按钮的状态:
可以看到 我把 查看、删除及搜索的权限全都去掉之后,刷新页面 这三个按钮全都边为了不可点击的状态。说明我们需要实现的按钮权限已经实现。
实现起来还是挺简单的,但是实现的过程却不简单。所以在遇到问题的时候一定要多查阅资料,才能更好的帮助我们解决问题!!!
文章浏览阅读274次。在做查询过程中,例如要实现查上个月从第一天到最后一天的佣金(提成),那我们在程序实现过程中就要让程序在上个月的范围内查询,第一天是比较好办,但最后一天就不定,要去写段函数进行月份及年份判断来得出上个月共有多少天.那就比麻烦,还有获取当前月份,当前年份等常规日期获取函数,以下代码都是经过本公司工程师测试后的正确代码,可以放心使用. 1.获取上个月第一天及最后一天. echo date('_php 判断是否月最后一天取上月月份
文章浏览阅读6.2k次。.xsa文件的生成Vivado工程建立你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。1.我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;增加_.xsa
文章浏览阅读475次。一、HTMLParser.net是什么?HTMLParser.net是HtmlParser的JAVA版本的dot net版本。二、HTMLParser可以用来做什么?HtmlParser是用来改造或者提取HTML,通过HtmlParser可以高速,快捷的从Html页面中分离出你想要的内容。三、HTMLParser的核心模块是org.htmlparser.Parser类,这个类实际完成了对于HTML_htmlparser.net
文章浏览阅读1.3w次,点赞6次,收藏48次。1. 简介QEMU(quick emulator)是一款由法布里斯·贝拉(Fabrice Bellard)等人编写的免费的可执行硬件虚拟化的(hardware virtualization)开源托管虚拟机(VMM)。QEMU 是一个托管的虚拟机镜像,它通过动态的二进制转换,模拟CPU,并且提供一组设备模型,使它能够运行多种未修改的客户机OS,可以通过与KVM一起使用进而接近本地速度运行虚拟机(接近真实电脑的速度)。QEMU还可以为user-level的进程执行CPU仿真,进而允许了为一种架构编译的程序_qemu
文章浏览阅读1.4w次,点赞14次,收藏78次。软件:Visual C++版本:6.0语言:简体中文大小:34.26M安装环境:Win11/Win10/Win8/Win7硬件要求:[email protected] 内存@4G(或更高)下载通道①百度网盘丨下载链接:提取码:dg2n[更多软件]:点击进入管家「软件目录」!_visual c++安装教程
文章浏览阅读2.7w次,点赞2次,收藏8次。新路由3 newifi3 d2 高恪魔改固件,请在breed中先刷入底包,然后启动路由器进入底包系统后,再在底包系统里面网页web升级固件,选择魔改进行升级,切记必须这样操作。压缩包包含了底包和固件解压密码 123下载地址:https://u13909188.pipipan.com/fs/13909188-384246318..._新路由3高恪5.0nat1
文章浏览阅读7.6k次,点赞2次,收藏9次。Instrumentation是一种直接修改程序二进制文件的方法。其可以用于程序的调试,优化,安全等等。对这个词一般的翻译是“插桩”,但这更多使用于软件测试领域。【找一些相关的例子】Dyninst可以动态或静态的修改程序的二进制代码。动态修改是在目标进程运行时插入代码(dynamic binary instrumentation)。静态修改则是直接向二进制文件插入代码(static b_dyninst
文章浏览阅读2.9k次。部署asp网站到云服务器 内容精选换一换通常情况下,需要结合客户的实际业务环境和具体需求进行业务改造评估,建议您进行服务咨询。这里仅描述一些通用的策略供您参考,主要分如下几方面进行考虑:业务迁移不管您的业务是否已经上线华为云,业务迁移的策略是一致的。建议您将时延敏感型,有快速批量就近部署需求的业务迁移至IEC;保留数据量大,且需要长期稳定运行的业务在中心云上。迁移方法请参见如何计算隔离独享计算资源..._nas asp网站
文章浏览阅读4.7k次。/** 方法一 * 将bitmap转为数组的方法 * * @param bitmap 图片 * @return 返回数组 */ public byte[] getBytesByBitmap(Bitmap bitmap) { ByteBuffer buffer = ByteBuffer.allocate(bitmap.ge..._bitmap转数组
文章浏览阅读6.6k次,点赞2次,收藏6次。IDEA修改SVN地址 SVN地址改变了,在IDEA上的项目地址还没有修改 第一步:选中项目,右键Subversion --> Relocate第二步:From URL路径保持不变(修改To URL为最新路径)第三步:选中项目,右键Subversion --> Update Directory第四步:勾选Update修改URL为最新的即可SVN地址改变了,在IDEA上的项目地址还没有修改_idea修改svn地址
文章浏览阅读3.8k次。欧拉图及欧拉路径欧拉图 如果图G上有一条经过所有顶点、所有边的闭路径(边不重复,顶点可以重复)充分必要条件 无向图:G连通,所有顶点的度都是偶数有向图:G弱连通,每个顶点出度与入度相等欧拉路径 如果图G上有一条经过所有顶点、所有边的路径(边不重复,顶点可以重复)充分必要条件 无向图:G连通,恰有两个顶点的度是奇数有向图:G连通,恰有两个顶点的出度与入度不相等,其中一个出度比入度多_哈密顿通路度为偶数
文章浏览阅读68次。两个命令:svn info :显示版本库信息,svn的下载url等。svn co https://xxxxx/xxx wodemulu (通过我的目录制定co的文件夹)svn st:显示修改的文件。=-=========================================第一章 安装1. 采用源文件编译安装。源文件共两个(可下载完传入linux),为:s..._can't lunch modelsim make sure