前言

按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能，但是没有凸显出来，所以现在单独写一篇文章用来记录一下

一、什么是按钮权限控制？

刚刚做完了一个后台管理系统，有用到按钮权限控制，所以记录一下。按钮权限控制就是说对于不同的用户，可操作的按钮是不一样的，比如有些按钮有些用户是看不见，有些用户是可以看得见的。应用场景：用户A能看得到‘新增’按钮，而用户B是看不到‘新增’按钮的

二、使用步骤

按钮权限控制，我知道的有两种解决方案:1.定义一个全局方法,配合v-if实现（下面会介绍）;2.使用自定义指令;
思路：在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中，然后在工具类中定义一个公共函数hasPermission，在按钮中调用hasPermission()函数，把传入的关键字和store的按钮权限进行对比，看看是否存在，如果存在就显示，不存在就隐藏

1.获取按钮权限数据，存储在store中

用户登录成功之后就会调用getInfo方法获取用户页面权限和按钮权限

permissionList即为按钮权限的数组格式

store文件中的user.js定义getInfo

import {login,logout,getInfo
} from '@/api/user'
import cookieUtils from '../../utils/auth'
// eslint-disable-next-line no-unused-vars
import router from '../../router/index'
// eslint-disable-next-line no-unused-vars
import store from '../../store'import wutong from '@/assets/img/wutong_img.png'
const getDefaultState = () => {return {nickname: '',userId: '',// avatar: 'https://www.gravatar.com/avatar/6560ed55e62396e40b34aac1e5041028',avatar: wutong,roleName: '',menus: [],permissions: []}
}const state = getDefaultState()const mutations = {SET_USER: (state, userInfo) => {state.nickname = userInfo.nicknamestate.userId = userInfo.userIdstate.roleName = userInfo.roleNamestate.menus = userInfo.menuListstate.permissions = userInfo.permissionList},RESET_USER: (state) => {state.nickname = ''state.userId = ''state.roleName = ''state.menus = []state.permissions = []}}const actions = {// get user infoGetInfo({commit,state}) {return new Promise((resolve, reject) => {getInfo().then(data => {// console.log('get User Info: ', data)// 账号在其他地方登录if (!data) {commit('RESET_USER')window.sessionStorage.removeItem('overdueloan')// must remove  token  firstcookieUtils.removeJwtToken()cookieUtils.removeUserType()router.push({ path: '/login' })return}// 储存用户信息commit('SET_USER', data.data.userPermission)// cookie保存登录状态,仅靠vuex保存的话,页面刷新就会丢失登录状态// 生成路由const userPermission = data.data.userPermissionstore.dispatch('GenerateUserRoutes', userPermission).then(() => {// 生成该用户的新路由json操作完毕之后,调用vue-router的动态新增路由方法,将新路由添加router.addRoutes(store.getters.addRouters)})resolve(data)})// .catch(error => {//   reject(error)// })})},}
export default {namespaced: true,state,mutations,actions
}

导出getters方便使用

2.定义公共函数

然后全局注册

3.使用hasPerm控制按钮

三.最后一种按钮控制的解决方案是使用自定义指令

因为我没有使用过自定义指令来控制按钮所以我就不在这里介绍了，下面是我在网上看到的自定义指令的写法，可以借鉴借鉴别人的写法，当然你要是有好的写法也欢迎留言介绍

大佬的写法1：自定义指令控制按钮权限

大佬的写法2：自定义指令控制按钮权限

Vue 前端页面按钮权限控制相关推荐

vue 前端配置按钮权限
拿到产品需要配置的按钮权限清单,如下在中台资源管理配置中,根据页面位置添加,'权限标识'名称不可重复注意一定要是菜单类型按钮,然后在"权限管理"通过勾选赋予按钮权限登录后 ...
vue 按钮权限控制
vue 按钮权限控制前言在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限.必须当有删除权限时,就显示删除按钮.没有这个权限时,就不显示或者删除这个按钮.通过查找资料,通过 ...
基于Vue实现后台系统权限控制
原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue这类双向绑定框架做后台系统再适合不过,后台系统相比普通前端项目除了 ...
自定义jsp标签实现按钮权限控制
一.了解jsp自定义标签自定义标签是用户定义的JSP语言元素.当JSP页面包含一个自定义标签时将被转化为servlet,标签转化为对tag handler的对象的操作,即当servlet执行时Web ...
Vue 进阶系列丨权限控制 addRoute()
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
java按钮权限控制_aop （权限控制之功能权限）
在实际web开发过程中通常会存在功能权限的控制,不如这个角色只允许拥有查询权限,这个角色拥有CRUD权限,当然按钮权限显示控制上可以用button.tld来控制,本文就不说明. 具体控制流程就是通过登 ...
菜单权限及按钮权限控制
实现思路: 1.通过利用动态路由.静态路由实现动态路由 2.通过router-beforeEach钩子监听是否有权限 3.利用Vue.directive监听页面挂在完成控制按钮权限实现代码: rou ...
java按钮权限控制_详解Spring Security 中的四种权限控制方式
Spring Security 中对于权限控制默认已经提供了很多了,但是,一个优秀的框架必须具备良好的扩展性,恰好,Spring Security 的扩展性就非常棒,我们既可以使用 Spring Se ...
前端vue开发页面按钮字体颜色白色或文本框不存在谷歌
第一种情况:使用elementui按钮组件结果:里面字体白色: 第二种情况:添加了input输入框结果不显示解决方法:查看右上角是否有插件icon 如果有的话把正在执行的插件(一般是流氓广告)移除 ...

Vue 前端页面按钮权限控制

前言