vue封装一个简单的权限管理功能, 控制页面的按钮显示与隐藏

最新推荐文章于 2024-07-01 21:01:42 发布

酒渣

最新推荐文章于 2024-07-01 21:01:42 发布

阅读量433

点赞数 4

分类专栏： vue js 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_40923558/article/details/139927547

版权

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

13 篇文章

订阅专栏

vue封装一个简单的权限管理功能, 控制页面的按钮显示与隐藏

1、在项目入口html文件创建全局变量

<head>
	<script>
		// 创建全局变量
		window.SITE_CONFIG = {};
		// 登录成功后获取到的按钮权限数据存储到这里
		window.SITE_CONFIG['purview'] = [];
	</script>
</head>

2、在utils/index.js里编写

export function hasPurview(key) {
  return window.SITE_CONFIG['purview'].indexOf(key) !== -1 || false
}

3、在main.js里引入

import {hasPurview} from '@/utils/index.js'
Vue.prototype.$hasPurview = hasPurview;

4、在页面使用

<el-button v-if="$hasPurview('add')">提交</el-button>

5、模拟获取到的权限数据

axios.post('接口地址').then(({data:res})=>{
	if (res.data !== 200){
		return this.$message.error(res.msg)
	}
	// 返回值数据: res.data.purview = ['add','del','update']
	window.SITE_CONFIG['purview'] = res.data?.purview;
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

酒渣

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue项目自定义滚动指令控制按钮显示隐藏

Z.Dragon 的博客

09-05

1997

在vue项目中，有些页面需要toTop的按钮（滚到顶部），因此在页面中需要用到滚动事件，但是如果很多页面都需要用到这个按钮，就要在这些页面中都加上滚动事件，会导致页面代码臃肿，不便维护。这里使用vue自定义指令封装一个全局的滚动事件，在需要的页面引用组件，加上指令即可。下面上代码： 1、首先封装一个toTop的按钮组件（默认显示） <template> <div id...

vue directive全局自定义指令实现按钮级别权限控制

且听风吟的博客

02-04

1787

vue directive全局自定义指令实现按钮级别权限控制

参与评论您还未登录，请先登录后发表或查看评论

详解VUE前端按钮权限控制

10-17

主要介绍了VUE前端按钮权限控制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue 权限按钮显示隐藏 (自定义指令法)

ZL3064436257的博客

12-02

1805

这里我是通过当前router获取的你们也可以通过 vuex pinia 等状态管理工具获取你们后台返回的路由数组中的meta 中的权限标记数组具体根据项目而定请自行修改。authItem如果为数组 authArr中的数组内容和authItem的数组内容一样就显示。authItem如果为字符串 authArr中存在这个字符串就显示。authItem 是当前按钮的权限标记可以传字符串/数组。authArr 是当前页的权限标记数组。在 main.js 中引入。传的这两个参数就是比较。

Vue3自定义指令封装-按钮权限控制v-permission、hasPermissions

Vivien_CC的博客

05-09

4115

背景：平常所接触到的系统权限控制，大部分都是菜单、路由级别的控制，但后台管理系统中，很多操作都是与职责和角色挂钩的，同样一个列表，不同人的操作列并不都一样，有些页面存在一些含有重要数据的组件，也会进行相应的权限控制，仅让领导层能看到。：根据用户的权限不同，对不同的按钮进行权限控制，对同一组数据，不同的用户是否可以增删改查。对某些用户来说是只读浏览数据，对某些用户来说是可编辑的数据。除了按钮，比如页面中的某个字段，某个div，某个组件要求根据当前用户的权限进行控制时，都可以称为按钮级权限。

vue前端自定义v-xxx指令实现根据用户权限控制元素的显示隐藏

我总是词不达意的博客

10-07

2897

vue前端自定义指令实现根据用户权限控制元素的显示隐藏

vue 权限按钮显示隐藏 (组件法)

ZL3064436257的博客

12-02

2354

拿到使用权限按钮组件的该页按钮权限标记数组然后就可以进行判断。这里我传的是数组必须该页权限数组和咱们传的这个数组一样才会显示。组件可以局部注册也可以全局注册大家都会我就不做介绍了哈。这里我做了判断传过来的是单个字符串或者数组。

Vue 指令实现按钮级别权限管理功能

10-17

Vue指令实现按钮级别权限管理功能是一个涉及到前端Vue框架的权限控制技术。在Web开发中，用户权限管理是不可或缺的一部分，它确保了用户界面元素只向符合特定权限条件的用户显示。本文介绍的实现方法，通过Vue指令这...

vue3 + ts 权限管理

weixin_43073383的博客

09-10

1234

权限管理是一个非常重要的方面。通过权限管理，我们可以控制用户对不同功能和资源的访问权限，从而保护系统的安全性和数据的完整性。在本篇博客中，我们将介绍如何使用 Vue 3 和 TypeScript 来实现一个简单的权限管理系统，包括路由权限、页面权限和按钮权限，并给出相应的示例代码。

简易实现 vue 自定义指令控制页面中按钮的显示与隐藏

正是修行时，正是修行时，正是修行时...

04-01

939

按钮

vue根据条件不同显示不同按钮的操作

10-15

主要介绍了vue根据条件不同显示不同按钮的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue权限控制显隐

qq_49899911的博客

12-21

745

权限来控制按钮显隐。实现：我们需要自定义指令来控制 1.新建一个文件btnOption.js import Vue from 'vue' Vue.directive('has ', { inserted: function (el, binding) { let str = binding.value.split(':')[0]; let strMenu = binding.value.split(':')[1]; let strBtn = bind

Vue根据权限获取页面按钮显示与隐藏

weixin_42155710的博客

08-12

1813

Vue封装取页面权限按钮显示与隐藏

vue按钮级权限控制及权限按钮的封装

qq_41851890的博客

10-08

1701

vue按钮级权限控制及权限按钮的封装设计原理获取用户所有权限对比权限的方法按钮封装设计封装按钮的引入与使用效果图设计原理对于vue按钮级权限控制主要是先给按钮设定一个权限吗，然后从数据库取出用户权限进行对比，如果用户权限中包含这个按钮的权限则按钮可用，不然就禁用。获取用户所有权限 // 获取用户菜单 getMenu({ commit, state }) { return new ...

vue自定义指令，根据权限控制元素显示隐藏

lucky_zouzou的博客

06-30

895

接上一篇自定义指令-按钮防重，这篇记录一下自定义按钮权限控制指令，全局注册指令见👇。

按钮控制：vue，根据用户权限，控制按钮的显示和隐藏

weixin_46371752的博客

03-01

1万+

1、登录成功后，后端返回的数据格式 { "code":100, "msg":"登录成功", "role":1, "token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NzI3NDkzLCJlbWFpbCI6IiJ9.9cBPqkkTxXS2aAjwRadcWuQLc5wgHdAG_YeRc82hGz0", ...

vue-权限控制