-
vue前端按钮显示隐藏_关于门户的前端权限管理
2021-01-07 12:43:22早期的MVC时代,web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏,只不过呈现方式不同,大多以php和jsp等为主,随着前后端分离后,前端也成了权限控制的扛把子,主要是从以下这几个角度去实现,路由...❝
前沿:我所理解的门户Portal就是一个入口, 可快速整合应用入口,用来统一账号管理、统一认证登录,打破信息孤岛等,做统一的权限管理,也可以实现单点登录 SSO。早期的MVC时代,web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏,只不过呈现方式不同,大多以php和jsp等为主,随着前后端分离后,前端也成了权限控制的扛把子,主要是从以下这几个角度去实现,路由层面、视图层面以及接口层面
❞1.路由层面
❝
一般SPA应用结合vue-router和vuex实现完成的一套路由体系,主要两种方式,一种是通过vue-router addRoutes 方法注入路由实现控制,另外一个是直接通过vue-router beforeEach钩子限制路由跳转
❞1.1 router.beforeEach()
❝
beforeEach钩子函数就是在路由跳转前执行的,通过注册 router.beforeEach 钩子对路由的每次跳转进行管理,每次跳转都进行检查,如果目标路由不存再于基本路由和当前用户的用户路由中,则取消跳转,转为跳转错误页或登录页面
❞- 在路由定义时添加meta的一个属性,来控制判断该页面是否需要登录权限
1.2 动态路由 (DynamicRoutes)
❝
用来实现页面访问权限,动态路由通过
❞router.addRoutes()
,来只挂载当前用户拥有权限的路由,如果用户直接访问未授权的路由,则会进入404页面。但是前提是需要用户登录后获取路由权限,一般动态挂载是在router.beforeEach
处理的,下面我们看具体实现定义好需要动态挂载的路由,区分是分为初始路由和根据role角色来动态挂载的“用户路由”,比如
constantRoutes
和asyncRoutes
router.beforeEach
添加router.addRoutes
事件 文档链接?
为了防止重复配置相同路由,在添加路由之前判断是否已经存在角色权限
- 获取拥有权限的路由,
generateRoutes
的实现
通过递归的方式去过滤去用户的路由权限,通过router.addRoutes()动态添加所有符合权限的路由,当然这种方式需要依赖后端。对于不同角色的用户,是由后端将路由列表告诉给前端注册
❝
?? 啊乐同学: 如果这个时候我退出登录了,然后没有刷新页面,重新登录另一个不同权限的用户,那岂不是路由会重复?
❞答:你在路由文件中定义
resetRouter
的方法,新建一个全新的 Router,然后将新的 Router.matcher 给当前的Router,在登出的模块中调用resetRouter方法总结:
beforeEach
是需要靠我们手动去帮 vue-router “辨别哪些页面可以访问,哪些不可以 ”addRoutes
则是通过注入路由配置告诉 vue-router “我就只认这些路由,其它路由地址跟我无关”
2.视图层面
❝
上一节聊的路由方面的权限控制,主要在控制菜单页面权限,那如果是按钮权限,应该怎么做?比如页面中的按钮 (增、删、改、查)的权限控制是否显示
❞2.1 指令控制
❝
可以结合vue的自定义指令,实现一个权限指令比如
❞v-auth
来控制权限,来判断对应模块是否拥有某个权限时,如果没有则移除当前按钮dom元素,下面我们看下这个实现方式?通过自定义权限指令v-auth来实现按钮权限控制,通过传入权限角色数组列表,来控制元素是否显示
❝
?? 啊乐同学: 为啥不直接用
❞v-if
或者v-show
去控制显示隐藏,而是自定义指令?答:因为 v-show 的话,dom其实没有隐藏,用户可以改变display就看到,v-if呢,则是删除之后会遗留备注
思考? : 如果要实现按钮显示但是禁用的情况,上面的例子应该如何修改?
? 推荐阅读:
- vue-element-admin后台前端解决方案
- 手摸手,带你用vue撸后台 系列二(登录权限篇)
3.接口层面
❝
我们在项目使用中,请求库以axios较多,我们通常会使用axios的API
❞axios.interceptors.request.use
也就是拦截器来做权限管理请求头添加 token认证,或者也可以直接使用cookie中的授权信息,前提是要配置
withCredentials
为true,也就是axios.defaults.withCredentials = true
, 开启withCredentials后,服务器才能拿到你的cookie拦截器拦截接口返回结果,比如401没有登录权限。
请你喝杯? 记得三连哦~
1.阅读完记得给? 酱点个赞哦,有? 有动力
2.关注公众号前端那些趣事,陪你聊聊前端的趣事
3.文章收录在Github frontendThings 感谢Star✨
-
Vue 新手学习笔记:vue-element-admin 之按钮级权限管控
2019-06-26 14:11:39随着软件的发展,网站从最初的满足用户业务需求到提升用户。就比如一个按钮只要求权限方面的管控我们可以通过 shiro,注解等方式来...3.页面加载按钮时通过判断权限的存在与否,控制按钮的显示隐藏或者样式选择 P...随着软件的发展,网站从最初的满足用户业务需求到提升用户。就比如一个按钮只要求权限方面的管控我们可以通过 shiro,注解等方式来实现,但是页面上用户点击后没反应或者点击后弹框没权限,这显然不是一个好的用户体验,因此通过前端来实现权限管控也是很有必要的。
思路
1.获取按钮权限
2.按钮权限保存在前端全局中 vuex
3.页面加载按钮时通过判断权限的存在与否,控制按钮的显示隐藏或者样式选择PS:事实证明,思路清晰,实现起来就很容易,没几行代码
表结构与数据
就表结构方面设计上不管有哪些字段,我们需要一个字段来存储唯一权限,其他都是浮云,如图
打印看看获取到的数据
可以看到我只返回了权限数组,因为其他字段没有意思,当然直接返回对象也是 ok 的
实现
先来添加下 vuex 全局变量,方便后面获取到按钮权限后进行存储
/src/store/modules/user
新增 button 全局变量,并在新增 mutations 操作 button
为啥是在这,因为按钮的权限是属于每个用户的
/src/store/getters
使用时我们一般需要通过这个东西来获取全局变量中的值
这个 state.user.button 以我的理解就是上图中 user 对象下的 button/src/store/modules/user
回到 user 文件,现在我们可以把取到的 button 权限放到全局变量中就行了
做过权限模块的都知道这个 GetUserInfo 方法,每次缓存失效后,都会调用这个方法去获取必要的用户信息,这里按钮权限我也是在这里直接返回获取。
如果说你的按钮权限时单独写的,你也可以在这个文件里写个获取的方法,然后再 permission 文件里去调用,如图
当然我不太建议单独去获取,因为由于vue自身特性的原因,vuex中的数据在页面刷新之后其中的数据会初始化,也就是数据没了,这个时候就会去调用后台去获取数据,如果每次都去单独获取,在高并发等情况下这种频繁的重复数据的请求会给数据库带来巨大的压力,因此像一些用户权限数据,我比较建议在登陆时统一获取后保存到 redis 这种地方,以后的请求都只需要从 redis 取就可以了,效率上也会得到巨大的提升。按钮调用
调用就很简单了,直接获取全局中的权限,用 v-if 判断是否包含这个按钮就行了,includes 后面的字符串就是对应这个按钮的权限
PS:如果存储起来的不是这种简单的字符串数组,也可以改为 some 函数去判断 -
directive用户登录权限控制按钮显示与隐藏
2020-07-25 17:52:29后台管理项目中有系统权限控制,根据你登录的角色账号,后台给你返回不一样的权限控制,用按钮显示,然后再做操作。 我们登录成功之后把权限保存在session storage里面,用ktBtn命名来存储。 然后在main.js里面写...后台管理项目中有系统权限控制,根据你登录的角色账号,后台给你返回不一样的权限控制,用按钮显示,然后再做操作。
我们登录成功之后把权限保存在session storage里面,用ktBtn命名来存储。
然后在main.js里面写全局指令。Vue.directive("has", { inserted: function (el, binding) { let prems = JSON.parse(sessionStorage.getItem("ktBtn")) if (prems.indexOf(binding.value) == -1) { el.remove() } } })
现在就好了,然后在有权限控制按钮的页面操作,在按钮上添加v-has。
<el-button type="primary" v-has="'/user/trans;/sys/auth/admin/list'">转让客户</el-button> <el-button type="primary" v-has="'/user/setUserStatus'">冻结账号</el-button> <el-button type="primary" v-has="'/user/setUserStatus'">解冻账号</el-button>
现在页面上就会显示权限按钮了,当你有这个权限的时候会显示,登录的角色没有这个权限的时候会隐藏,不会的可以直接copy代码尝试一下。
-
Element-UI+VUE 实现按钮权限管理
2019-12-10 10:05:44比如有删除权限,就显示对应的删除按钮,没有这个权限,就置为不可点击状态,或者就是直接隐藏。 作为一个后台开发工作者来讲,对于前端的一个技术,涉猎并不是很深,只能通过官方文档或者百度先简单了解下。经过一...前端朋友遇到项目中的一个问题,就是需要根据后台接口返回的数据,来判断当前用户的操作权限。比如有删除权限,就显示对应的删除按钮,没有这个权限,就置为不可点击状态,或者就是直接隐藏。
作为一个后台开发工作者来讲,对于前端的一个技术,涉猎并不是很深,只能通过官方文档或者百度先简单了解下。经过一系列的调查 得知,想实现这么一个功能,比较简单的就是使用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); },
此时我们再来看看 按钮的状态:
可以看到 我把 查看、删除及搜索的权限全都去掉之后,刷新页面 这三个按钮全都边为了不可点击的状态。说明我们需要实现的按钮权限已经实现。
实现起来还是挺简单的,但是实现的过程却不简单。所以在遇到问题的时候一定要多查阅资料,才能更好的帮助我们解决问题!!!
-
vue实现页面权限显示_如何用 Vue 实现前端权限控制(路由权限 + 视图权限 + 请求权限)...
2020-12-19 15:11:31为什么做前端权限控制前端权限控制并不是新生事物,早在后端MVC时代,web系统中就已经普遍存在对按钮和菜单的显示/隐藏控制,只不过当时它们是由后端程序员在jsp或者php模板中实现的,随着前后端分离架构的流行,... -
vue权限篇
2019-05-30 17:48:00前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们...第一个是侧边菜单栏,需要控制显示与隐藏。 第二个就是页面内的各个按钮,弹窗等。 流程 如何获取用户权限? 后端(当前用户拥有... -
VUE后台管理系统权限管理思路
2020-11-25 11:16:28一.有两种做法:(权限就是路由,按钮权限就是控制显示和隐藏) 1.权限组放在前端(包括按钮权限)。...3.按钮权限:把按钮的名称放在一个数组里面,然后在按钮上使用v-if来判断有或者没有显示隐藏就行了。 ... -
vue中如何加入横线_如何优雅的在 vue 中添加权限控制
2020-12-30 05:24:09前言在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全...第一个是侧边菜单栏,需要控制显示与隐藏。第二个就是页面内的各个按钮,弹窗等。流程如何获取用户权限?后端(当前用户拥有的权限列表)-&g... -
如何优雅地在vue中添加权限控制示例详解
2020-12-12 05:37:45第一个是侧边菜单栏,需要控制显示与隐藏。 第二个就是页面内的各个按钮,弹窗等。 流程 1、如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表... -
如何在 vue 中添加权限控制管理?
2020-01-06 15:27:52前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入...第一个是侧边菜单栏,需要控制显示与隐藏。 第二个就是页面内的各个按钮,弹窗等。 流程 如何获取用户权限... -
如何优雅的在 vue 中添加权限控制
2019-05-14 10:10:57前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中...第一个是侧边菜单栏,需要控制显示与隐藏。 第二个就是页面内的各个按钮,弹窗等。 流程 如何获取用户权限? ... -
如何优雅的在 Vue 中添加权限控制
2019-04-13 13:44:00在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,...第一个是侧边菜单栏,需要控制显示与隐藏。 第二个就是页面内的各个按钮,弹窗等。 流程 如何获取用户权限? 后端(当前用户拥有的权限列... -
authorize如何控制多个角色权限】_如何优雅的在 vue 中添加权限控制
2020-12-28 22:17:55前言在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们...第一个是侧边菜单栏,需要控制显示与隐藏。第二个就是页面内的各个按钮,弹窗等。流程如何获取用户权限?后端(当前用户拥有的权限列... -
authorize如何控制多个角色权限】_如何优雅的在 Vue 中添加权限控制
2020-12-28 03:35:10前言在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的...第一个是侧边菜单栏,需要控制显示与隐藏。第二个就是页面内的各个按钮,弹窗等。流程如何获取用户权限?后端(当前用户拥有的权限列表)-&g... -
vue之前端鉴权
2019-06-18 15:47:001、渲染菜单时控制模块按钮的显示隐藏(不足:直接输入链接仍然可以访问模块) 2、在路由导航守卫中拦截,针对没有权限的模块进行重定向(不足:每次访问模块都需要鉴定权限,模块数量过多时会影响系统性能) ... -
Vue 实现前端权限控制
2019-10-03 09:33:42为什么做前端权限控制前端权限控制并不是新生事物,早在后端 MVC 时代,web 系统中就已经普遍存在对按钮和菜单的显示 / 隐藏控制,只不过当时它们是由后端程序员在 jsp 或者 php 模板中实现的。随着前后端分离架构的... -
关于门户的前端权限控制
2020-12-01 10:58:29早期的MVC时代,web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏,只不过呈现方式不同,大多以php和jsp等为主,随着前后端分离后,前端也成了权限控制的扛把子,主要是从以下这几个角度去实现,路由...
-
新建文本文档.txt
-
基于THB7128步进电机驱动板protel99se设计硬件原理图+PCB源文件(直接拿来可以用).zip
-
Samba 服务配置与管理
-
5-1-1 缓存原理&设计
-
英语语法八大时态总结.doc
-
OMRON电气设备选型资料(大全 )
-
UL1082-2017 家用咖啡壶和冲泡型器具安全要求- 完整中文翻译版(168页)
-
IFM 电气设备选型资料大全
-
华为1+X——网络系统建设与运维(高级)
-
大漠插件3.1233
-
js向div中追加子元素,且不改变已有子元素的内容
-
Docker认识和深入(二)
-
13. 三角形判定
-
基于Qt的LibVLC开发教程
-
使用JDBC连接数据库出现The server time zone value ‘�й���ʱ��‘ is unrecognized 的解决方案
-
WERMA电气设备选型资料大全
-
一文了解Synchronized关键字
-
java学习Day16
-
2019年下半年 网络工程师 应用技术.docx
-
Oracle19c启动监听listener服务