基于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'
/**权限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 获取按钮权限
  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
  if (!Vue.prototype.$_has(btnPermissions)) {
   el.parentNode.removeChild(el);
  }
 }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (value.indexOf(btnPermissionsStr) > -1) {
  isExist = true;
 }
 return 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自定义指令实现按钮级权限控制，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue自定义指令使用方法详解

    Vue自定义指令使用方法详解

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数 2.钩子函数 定义对象的钩子函数如下: 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: *name: 指令名,不包括 v- 前缀. *value: 指令的绑定值, 例如: v-my

  • vue自定义指令实现方法详解

    本文实例讲述了vue自定义指令实现方法.分享给大家供大家参考,具体如下: vue中的指令就是v-on v-bind v-show等等,那么自定义指令是什么呢? 自己定义的指令就是自定义指令. 语法: Vue.directive(id, definition) 这里可以参考vue中的指令 <h1 v-if="yes">Yes</h1> 其中,if就是指令ID,yes是expression Vue.directive()传入接受两个参数,id是指指令ID,defin

  • vue自定义指令实现仅支持输入数字和浮点型的示例

    再开始本篇的讨论之前,先思考几个问题: 使用html元素属性type='number'是否可以满足要求 Vue中指令一般被设计用来操作dom元素的,而vue视图是基于数据模型的,如何在操作dom的同时,同时更新数据 你定义的指令不能只能在input元素上使用,还要支持在其父元素上使用,自定义组件及第三方组件上使用 你的指令是不是支持局部作用域,比如for循环渲染的数据的单元item,如何识别这个item进行数据更新和dom操作 如何控制字符数目,超出禁止输入 如何实现全局性的功能定义,从而在各个

  • Vue.directive 自定义指令的问题小结

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

  • 基于Vue实现可以拖拽的树形表格实例详解

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插件已打包封装好,发布到npm上 本博文会分为两部分,第一部分为使用方式,第二部分为实现方式 安装方式 npm i drag-tree-table --save-dev 使用方式 import dragTreeTable from 'drag-tree-table'  模版写法 <dragTreeTa

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

  • vue通过cookie获取用户登录信息的思路详解

    思路 进入页面 若未登录,跳转至登陆页面 若已登录,从cookie中获取用户信息,并执行后续操作 2. 登录页面,存入cookie(setCookie) import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode === this.pwd) { this.loginData = await getUserInfo(this.uname, this.

  • 基于Android studio3.6的JNI教程之helloworld思路详解

    jdk环境变量配置: path中增加下面2个路径,也就是android studio的路径,android有自带的jdk. E:\Android\Android Studio\jre\bin E:\Android\Android Studio\bin 新建工程: 一定要选择Native c++类型,最后要选c++11支持. SDK设置: File->Settings File->Project Structure 首先确定工程的目录结构,然后尝试运行一下工程,使用模拟器,确保工程没问题, 在M

  • 基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程. 首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么. 首先是token. 没有登陆的用户是获取不到token的,而登陆后的角色我们会将token存到local或者seesionStor

  • 如何优雅地在vue中添加权限控制示例详解

    如何优雅地在vue中添加权限控制示例详解

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制. 第一个是侧边菜单栏,需要控制显示与隐藏. 第二个就是页面内的各个按钮,弹窗等. 流程 1.如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做 permissi

  • MLSQL编译时权限控制示例详解

    前言 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界. 权限控制,对于MLSQL而言的重要程度可以说是生命线. MLSQL需要面对各式各样的资源访问,比如MySQL, Oracle,HDFS,Hive,Kafka,Sorl,ElasticSearch,Redis,API,Web等等,不同用户对这些数据源(以及表,列)的权限是不一样的. 传统模式是,每个用户都需要有个proxy user,然后到每个数据源里面给这个proxy user进行授权. 这看起来似乎就是麻

  • Vue自定义组件双向绑定实现原理及方法详解

    前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表,没有去封装列表组件,只要有一点改动,每个页面都得加上.很肯定的说,没有用组件化开发的Vue项目是没有灵魂的.所以如何封装一个优雅且复用性高的组件成为我们必需的技能. Tab自定义组件 首先来看一个Tab组件的实现,看看它存在什么问题,哪里可以改进? 效果 组件 <template> <di

随机推荐