Vue自定义指令实现按钮级权限控制功能
思路:
- 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
- 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮权限的数组,在路由表里配置 ),然后判断role是否在btnPermissions数组里,若不在即删除该按钮DOM。
按钮权限也可以用v-if判断,但是如果页面过多,每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断,感觉有点麻烦,而自定义指令,只需在权限按钮加入该指令即可。
路由配置:
path: '/permission',
component: Layout,
name: '权限测试',
meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
children: [
{
path: 'supper',
component: _import('system/supper'),
name: '权限测试页',
meta: { btnPermissions: ['admin','supper'] } //页面需要的权限
},
{
path: 'normal',
component: _import('system/normal'),
name: '权限测试页',
meta: { btnPermissions: ['admin'] } //页面需要的权限
}
]
注:如果按钮的权限是由后台配置并返回的此处可不设置,从后台获取权限即可
自定义指令:
import Vue from 'vue'
/**权限指令**/
// 权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
return false;
}
let res = value.filter((x) => {
return btnPermissionsStr.include(x)
})
if (res.length > 0) isExist = truereturn isExist;
};
export {has}
然后在main.js文件引入文件
import has from './public/js/btnPermissions.js';
页面中按钮只需加v-has即可
<el-button @click='editClick' type="primary" v-has>编辑</el-button>
权限前后端都可进行控制,但是尽可能的在前端就进行拦截验证。借用一句经典名言:永远不相信用户输入!
Vue自定义指令实现按钮级权限控制功能的更多相关文章
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- WinForm/MIS项目开发之中按钮级权限实践
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
随机推荐
- Python 网络爬虫 006 (编程) 解决下载(或叫:爬取)到的网页乱码问题
解决下载(或叫:爬取)到的网页乱码问题 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 Python 的集成开发环境:PyCharm 20 ...
- Luogu 2375 [NOI2014]动物园
字胡串什么的一直不太会,感觉这题…还蛮本质的 考虑暴力求解:num[i]相当于从一直跳nxt,如果nxt[j] * 2 <= i 那么就累加答案 其实这是一个树的结构,也就是说跳到一个结点满足条 ...
- Luogu 2827 [NOIP2016] 蚯蚓
原来真的是按题意模拟啊,还以为有高能的算法可以直接算每个$t$的值. 考虑到先切的蚯蚓一定比后切的蚯蚓长,于是可以弄三个队列分别存放原来的序列和两个切开后的序列,每次取出三个队头的最大值进行扩展. 考 ...
- SDUT 3401 数据结构实验之排序四:寻找大富翁.!
数据结构实验之排序四:寻找大富翁 Time Limit: 150MS Memory Limit: 512KB Submit Statistic Problem Description 2015胡润全球 ...
- 使用 classList API
一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...
- jquery ajax 分页2
/* * 分页 $("#divPager").flexipager * 2015.03.17 */ //初始化列表默认属性 (function($) { $.addFlex = f ...
- Java50道经典习题-程序39 分数累加
题目:编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+...+1/n import java.util.Scanner; public ...
- easyUI 展开DataGrid里面的行显示详细信息
http://blog.csdn.net/yanghongchang_/article/details/7854156原著 datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图 ...
- 依赖注入(DI)与控制反转(IOC)
DI(依赖注入,Dependency Injection),和所谓的IoC(控制反转,Inversion of Control )是一个意思. DI是一种通过接口实现松耦合的设计模式.初学者可能会好奇 ...
- sonar Failed to execute goal org.sonarsource.scanner.maven:sonar-maven-plugin:3.4.0.905:sonar
背景: 今天在项目根目录执行maven sonar:sonar ,报错信息如下,然后就各种的搜,折腾了多半天天也没找出解决办法,最后打算放弃时,看到一遍文章说是mysql max_allowed_p ...