vue多页面按钮级别权限控制directive指令控制(代码片段)

关键词：

利用driective 构建自己的指令，实现按钮级别权限

项目结构如下：

修改router.js

    
        path: ‘schools‘,
        name: ‘列表‘,
        component: () => import(‘./eduAdministration/SchoolList‘),
        meta: 
          permissions: [‘schools‘],
          btnpermissions:[‘admin‘,‘test‘],
          title: ‘列表‘,
          icon: ‘‘,
          scrollToTop: true
        
      ,

新建文件 btnPermission.js文件

内容如下

import Vue from ‘vue‘
import store from ‘../index‘
/**权限指令**/
const has = Vue.directive(‘has‘, 
  bind: function (el, binding, vnode) 
    // 获取按钮权限
    let Permissions = vnode.context.$route.meta.btnpermissions;
    console.log(‘permission‘,Permissions)
    if (!Vue.prototype.$_has(Permissions)) 
      let className=el.getAttribute("class")
      className=className.concat(" hidden")
      el.setAttribute("class",className)
    
  
);
// 权限检查方法
Vue.prototype.$_has = function (value) 
  let isExist = false;
   debugger
  let PermissionsStr =store.getters.roles;
  if (PermissionsStr == undefined || PermissionsStr == null) 
    return false;
  

  PermissionsStr.forEach((per)=>
    if (value.indexOf(per) > -1) 
      isExist = true;
    
  )
  return isExist;
;
export has

将文件引入index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import app from ‘./modules/app‘
import user from ‘./modules/user‘
import getters from ‘./getters‘
import permission from ‘./modules/permission‘
import has from ‘./modules/btnPermission‘
Vue.use(Vuex)
const store = new Vuex.Store(
  modules: 
    app,
    user,
    permission
  ,
  getters
)

export default store

页面添加权限

     el-button(size=‘mini‘ @click="handleEdit(scope.row)" v-has) 编辑

最后一步

在 css中添加hidden样式

<style scoped>
  .hidden 
    display:none;
  
</style>

大功告成

vue自定义指令

...有个需求时做后台权限判断，有两个级别，导航栏和每个页面的按钮权限导航栏我们直接根据后端接口返回的数据渲染导航栏，但是按钮级别当时考虑了两种方案，全局方法和自定义指令。因为考虑到是按钮，没有权限时可直接... 查看详情

vue项目中的按钮权限配置

...定义指令自定义一个v-permission来根据后端返回的数据进行按钮的显示隐藏从而达到按钮权限控制Vue.directive('permission', function(el,binding,vnode)  console.log(el)  console.log(binding)  console.log(vnode)  el.sty... 查看详情

面试官：vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？(代码片段)

...请求的发起权，请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说，所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实... 查看详情

「vue面试题」vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？(代码片段)

...请求的发起权，请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说，所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实... 查看详情

若依框架-vue实用框架（权限控制和页面渲染）(代码片段)

Vue实用框架（权限控制和页面渲染）路由的组成前端token获取那一步中有一块内容，只是简单提了一下，但其实实际涉及到的内容很多： 用户信息的获取第一步的GetInfo后端接口不讲了，因为接口都比较简单，就根据获取得到... 查看详情

vue给页面加水印指令(directive)(代码片段)

页面需要水印importVuefrom‘vue‘/***watermark指令*解决:给页面生成水印*基本原理：给选择器添加背景图片*用法：v-watermark="options"*option:*@paramstringtext水印文字*@paramstringwidth宽度*@paramstringtextColor文字颜色*/Vue.directive( 查看详情

vue设置按钮权限

方案一按钮权限也可以用v-if判断但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions，然后再做判断这种方式就不展开举例了方案二通过自定义指令进行按钮权限的判断首先配置路由path:'/permiss... 查看详情

vue前端用户权限控制大全

...(用户是否登录系统)，没有的话一般返回401，跳转到登录页面重新进行登录,登录成功后拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token通过自定义指令进行按钮权限的判断自定义权限指令在... 查看详情

(转)通过springmvc+annotation实现方法按钮级别的细粒度权限控制

原文地址：http://blog.csdn.net/ycyk_168/article/details/18456631随着企业信息化的不断深入，各种各样的信息系统成为提高企业运营及管理效率的必备工具，越来越多的企业核心机密如销售机会、客户资料、设计方案等通过信息系统存储、... 查看详情

vue页面权限控制(代码片段)

目录前言一、路由元信息和beforeEach()1、路由元信息2、beforeEach()二、权限管理1、路由比较少的情况2、多路由-遍历to.matched总结前言1.如果您有Vue-router基础,那么放心食用本文吧.2.本文只介绍beforeEach法;3.vue-router2.2以上版本的addRoutes... 查看详情

rbac基于角色的权限控制组件目录

...权限组件之权限动态数据转换 权限组件之左侧菜单的页面展示  查看详情

vue自定义指令及动态指令参数(代码片段)

场景1.为组件添加loading效果2.按钮级别权限控制 v-permission3.代码埋点,根据操作类型定义指令4.input输入框自动获取焦点注意事项注意：  1.自定义指令名称，不能使用驼峰规则，而应该使用"my-dir"或“my_dir”或&ldquo... 查看详情

vue开发实战实战篇#33：更加精细化的权限设计（权限组件权限指令）(代码片段)

...两种方式实现权限组件的控制，比如下面两个地方的按钮控制，如果是user用户，就没有权限控制函数式组件<script>importcheckfrom'../utils/auth';exportdefaultfunctional:true,props:authority:required:tr 查看详情

vue后台管理系统权限控制(代码片段)

...限从本质上来讲，就是控制视图层的展示，比如说是某个页面或者某个按钮，后端权限可以控制某个用户是否能够查询数据，是否能够修改数据等操作，后端权限大部分是基于RBAC，比如说一个用户可能会有多个角色，而一个角... 查看详情

vueconfirm如何控制按钮

参考技术A按照如下操作控制按钮：在main.js里面引入importhasfrom'./directive/btnPermissionjs';Vue.use(has);然后再页面上直接使用<template>新增编辑删除</template>即可。 查看详情

vue指令防止按钮重复点击

参考技术A在main.js中写入然后再需要用到的页面直接使用 这里有一个小问题：原理是在点击的时候，给自身加一个disabled禁止点击, 两秒后disabled取消，但是这个指令方法，在div上面没有生效， 所以需要用button按钮Vue.d... 查看详情

摸鱼时间少?是时候学会用vue自定义指令进行业务开发了(代码片段)

...形式下载后端数据(转blob下载)4.防抖(支持设置延迟时间)5.按钮或菜单权限控制(支持参数)6.界面添加水印指令(支持文字以及部分样式调节)二、Vue指令详解(了解代码,可以直接看第三步)自带指令自定义指令局部自定义指令注册全局... 查看详情

vue项目权限管理

参考技术A首先，权限管理般需求是两个：权限和按钮权限。前端案会把所有路由信息在前端配置，通过路由守卫要求户登录，户登录后根据过滤出路由表。如我会配置个asyncRoutes数组，需要认证的在其路由的meta中添加个roles字段... 查看详情