精华内容
下载资源
问答
  • 主要介绍了基于vue自定义指令实现按钮权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧
  • Vue自定义指令实现按钮权限管理

    千次阅读 2020-10-27 20:04:00
    1. 前言在 《从头再学 Vue 的指令》介绍了什么是 Vue 指令,以及如何实现自定义指令。接下来我们通过使用自定义指令来解决一个开发过程中的实际需求:按钮权限管理。2. 分析在管理系...

    1. 前言

    在 《从头再学 Vue 的指令》介绍了什么是 Vue 指令,以及如何实现自定义指令。接下来我们通过使用自定义指令来解决一个开发过程中的实际需求:按钮权限管理。

    2. 分析

    在管理系统中,不可避免的需要有权限管理模块。权限的划分可大可小。对于前端页面来讲,大一点的权限如菜单权限,小一点的如按钮权限。

    菜单权限的话我们可以在后端返回的菜单数据上做处理,后端处理时只将当前用户有权限的菜单数据返给前端即可,前端按数据渲染菜单即可。

    按钮权限的话,在 Spring MVC + Freemarker 中,我们可以在返回 View 时,将当前用户拥有的按钮编码直接设置到 model 中,在 Freemarker 中控制按钮是否渲染。这种前后端不分离的情况下,处理按钮权限的过程比较简单。

    在当今流行的前后端分离的架构中,视图的渲染不再是由 Spring MVC 中的 view 控制,而是由前端的单页应用来管理。前后端通过 http 协议进行 json 格式的数据交互。此时,对于按钮权限的需要在前端去控制。

    3. 实现

    对于前后端分离架构下的按钮权限控制,一个简单的实现思路就是:

    单页应用加载时,一次性将当前用户拥有的按钮权限加载到前端并缓存起来。页面切换时,每一个页面单独处理自己页面内的按钮的显隐。

    如果在每个页面都写处理逻辑的话,可能重复工作量就比较多。

    我们可以将处理逻辑封装到自定义指令中,在需要权限管理的按钮上增加自定义指令及按钮对应的唯一编码即可。

    自定义指令:

    // 注册一个全局自定义指令 `v-auth`
    Vue.directive('auth', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: (el, binding, vnode) => {
        const value = binding.value;
    
        const auths = localStorage.getItem('BTN_AUTHS') || '';
    
        if (!auths.split(',').includes(value)) {
          el.parentNode!.removeChild(el);
        }
      }
    });
    

    使用指令:

    <el-button type="primary" v-auth="`BTN_AUTH`">新增</el-button>
    

    这样,如果 「localStorage」 中的对象 「BTN_AUTHS」 如果包含 「BTN_AUTH」 按钮编码,则说明用户有该按钮权限,页面将显示该按钮,否则不对其进行渲染。

    4. 总结

    当然,我们还需要一个从后端请求当前用户拥有的所有按钮编码的过程,并将按钮编码通过 逗号“,”拼接,存储在 「localStorage」「BTN_AUTHS」 对象中。

    展开全文
  • vue项目中,有的情况下,你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 这里我们自定义一个按钮权限控制的指令 import Vue from 'vue' import store from '@/store' /**权限指令**/ Vue....

    vue项目中,有的情况下,你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
    这里我们自定义一个按钮权限控制的指令

    import Vue from 'vue'
    import store from '@/store'
    
    /**权限指令**/
    Vue.directive('has', {
      bind: function (el, binding) {
        if (!Vue.prototype.$_has(binding.value)) {
          // el.parentNode.removeChild(el);
          el.style.display = 'none';
        }
      }
    });
    //权限检查方法
    Vue.prototype.$_has = function (value) {
      let isExist = false;
      let buttonperms = store.state.user_info.btns
      // 权限列表
      for (let i = 0; i < buttonperms.length; i++) {
        if (buttonperms[i].indexOf(value) > -1) {
          isExist = true;
          break;
        }
      }
      return isExist;
    };
    

    然后在全局引入
    用的时候在按钮上添加v-has属性,并添加属性值(已经定义好的权限标识),与返回权限标识做比较即可。

    展开全文
  • 在后台管理项目上经常要求权限控制到按钮级,既如果当前登录用户没有新建、编辑、删除等权限就无法看到对应的功能按钮,这种需求可以使用vue自定义指令实现 首先针对自定义指令进行封装 在util文件夹内新建...

    在后台管理项目上经常要求权限控制到按钮级,既如果当前登录用户没有新建、编辑、删除等权限就无法看到对应的功能按钮,这种需求可以使用vue的自定义指令实现

    首先针对自定义指令进行封装

    在util文件夹内新建permission.js

    import Vue from 'vue'
    import store from '../index'
    
    // 定义自定义指令
    const has = Vue.directive('has', {
      bind: function (el, binding, vnode) {
        if (!Vue.prototype.$_has(binding.value)) {
          let className = el.getAttribute('class')
          if (className) {
            className = className.concat(' hiddenHandle')
          } else {
            className = 'hiddenHandle'
          }
          el.setAttribute('class', className)
        }
      }
    })
    
    // 定义用户权限检查方法
    Vue.prototype.$_has = function (value) {
      let isExist = true
      const arrPermission = value.split(',')
      // 从vuex中获取用户的具体权限列表
      const PermissionsStr = store.getters.roles.permissionList
      if (PermissionsStr === undefined || PermissionsStr == null) {
        return false
      }
      arrPermission.forEach(item => {
        if (PermissionsStr.indexOf(item) === -1) {
          isExist = false
        }
      })
      return isExist
    }
    export default has
    

    在main.js中引入,保证可以全局使用

    import has from './util/permission'
    
    Vue.use(has)
    

    在全局样式中定义hiddenHandle为吟唱

    .hiddenHandle{
      display: none !important;
    }
    

    在页面中的使用

    <a-button v-has="'sys_role_add'" type="primary" icon="plus" @click="add">新建</a-button>
    
    展开全文
  • 在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的...),之后,定义指令,如果用户含有此按钮权限,则在页面显示出来: /**权限指令**/ Vue.directive('has',{ bind:function (el,binding) { ...

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的sessionStorage进行存储(这里我是拿到权限按钮按钮的标识,英文名称。把他们合成一个字符串存储在 btnPowerString 中。),之后,定义指令,如果用户含有此按钮权限,则在页面显示出来:

    /**权限指令**/
    Vue.directive('has',{
      bind:function (el,binding) {
        let className = binding.value.class; //这个地方要注意了,看下面页面上的代码,对应取得相应的值
        if(!Vue.prototype.$_has(className)){
          el.parentNode.removeChild(el);
        }
      }
    })
    Vue.prototype.$_has = function (val) {
      let isShow = false;
      let btnPowerArr = sessionStorage.getItem('btnPowerString');
      if(btnPowerArr==undefined || btnPowerArr==null){
        return false;
      }
      if(btnPowerArr.indexOf(val) > -1){
        isShow = true;
      }
      return isShow;
    }

    页面上使用方式:

    <el-button type="warning" @click="handleMod()" v-has="{class:'btn-mod'}">修改</el-button>
    <el-button type="primary" @click="handleStart()" v-has="{class:'btn-del'}">启用</el-button>

    因为 vue2.0 ,不橡之前版本可以在 v-has 中直接传个字符串,所以这里只能用对象的方式传值,这里大家要注意了

    展开全文
  • 针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建个 array.js 文件,用于存放与权限相关的全局函数; // array.js export function checkArray (key) { let arr = ['1', '2', '3', '4', 'demo'] let...
  • 实现按钮权限控制可以把方法挂载到VUE原型上之后通过v-if来判断,也可以自定义指令来实现控制. 接下来主要说一下如何用自定义指令来实现按钮控制. 一. 新建userPermission.js文件 import Vue from 'vue'; Vue....
  • 业务需求除了路由需要控制外点击按钮也需要做到控制,百度了vue2相关资料发现大部分都是使用自定义指令实现控制按钮显示和隐藏,刚好手头上做了个demo 写个文档记录下; vue2和vue3directive的函数也不一样 bind → ...
  • 在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的sessionStorage进行...),之后,定义指令,如果用户含有此按钮权限,则在页面显示出来: <body> <div id="app"> <div sty...
  • 思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过... 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮权限的数组,
  • 我这里的按钮的权限是三级的权限,就比如删除是在天然氧吧这个页面下的 自定义指令 在main.js中创建v-has指令 //自定义按钮权限指令 Vue.directive('has', { inserted: function(el, binding) { if (permissionJudge...
  • <div id="app"> <button v-auth>查看员工薪资</button> </div>... // sessionStorage.setItem('... Vue.directive('auth', { inserted(el) { // console.log(new URLSearchParams(lo...
  • index.js: main.js里注册全局指令: 有按钮vue文件: 此处用到了自定义指令v-has
  • 简单的Vue自定义指令 vue.js官网自定义指令 scss官网(推荐学习样式,搭配vue写起来真的很爽很省事,还给小白一种高大上的感觉,哈哈哈哈~) key:自定义指令 scss 的 @each in 需求说明: 我接到的需求是,通过...
  • 针对这种情况,我们可以通过全局自定义指令来处理: 我们先在新建个 array.js 文件,用于存放与权限相关的全局函数; // array.js export function checkArray (key) { let arr = ['1', '2', '3', '4', 'demo'] ...
  • 由于按钮权限和用户登录角色相关,因此在用户登录后,我们首先要根据用户角色查询到当前用户权限下所拥有的全部数据。由于按钮分布于不同的页面,所以我们要把查询到的数据存储在 localstorage 或 sessionstorage 中...
  • 使用 Vue.directive(id, [definition]) 定义全局的指令来进行自定义指令 思路:在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面...
  • 主要介绍了vue自定义指令和动态路由实现权限控制的方法,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
  • #自定义指令判断方法 permission.js // permission.js import Vue from 'vue'; // 是否有权限 const hasPermission = btnRoleList => { // 当前用户的权限列表 let role = localStorage.getItem("role"); ...
  • vue 自定义指令 实现 按钮权限

    千次阅读 2019-04-04 16:39:20
    1.登录成功后,获取后台返回所有的按钮...2.在main.js中自定义指令 const has = Vue.directive('has', { inserted: function (el, binding) { // 获取按钮权限 if (!Vue.prototype.$_has(binding.value)) { ...
  • 权限应用-按钮级控制-自定义指令 指令: v-for, v-if… 自定义指令:自己定义的指令,因为本身指令不够用,所以我们需要自已去定义。 用它来做按钮级别权限控制 复习一下自定义指令 注册格式 // 注册一个全局自定义...
  • 权限数组 创建权限文件 src/common/array.js array.js export function checkArray(key){ //权限数组 let arr = ['1','3','5']; let index = arr.indexOf(key) ...自定义指令 main.js import {
  • 全局注册自定义指令: /权限指令/ Vue.directive(‘has’, { inserted: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { ...自定义指令防止按钮多次点击重复提交表单: Vue.directive(‘noMoreC...
  • 实现原理为:根据登录角色在路由定义permission可操作权限,通过自定义指令判断页面按钮或某一块内容是否需要展示。 1.路由页面结构 mock使用方法 import Vue from 'vue' import VueRouter from 'vue-router' ...
  • 在后台管理系统中,每个用户权限都往往...2、登录时获取按钮权限列表 步骤 1、创建v-auth 自定义指令 import Vue from 'vue' import store from '@/store' const directive = Vue.directive('auth', { inserted: (el.
  • 前言:关于权限的那些事!... 路由权限可参看这位大神写的,很全面==>手摸手,带你用vue撸后台 系列二(登录权限篇) 思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端...
  • Vue 自定义权限指令

    2020-10-21 13:05:17
    这里由于我的项目做了动态权限,页面的按钮也需要根据不同的权限来渲染,那么这里就需要我们这个权限指令了 // 文件名称:permission.js import Vue from 'vue' import store from '@/store' // 是否有权限 const ...
  • VUE常用的自定义指令

    2020-12-15 11:16:27
    基于 vue自定义指令集合,包含 复制粘贴指令 v-copy 长按指令 v-longpress 输入框防抖指令 v-debounce 禁止表情及特殊字符 v-emoji 图片懒加载 v-LazyLoad 权限校验指令 v-premission 实现页面水印 v-...
  • // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() } }) 【全局指令】 Vue.directive(指令名称,函数对象...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,333
精华内容 533
关键字:

vue按钮权限自定义指令

vue 订阅