精华内容
下载资源
问答
  • 接下来我们通过使用自定义指令来解决一个开发过程中的实际需求:按钮权限管理。2. 分析在管理系统中,不可避免的需要有权限管理模块。权限的划分可大可小。对于前端页面来讲,大一点的权限如菜单权限,小一点的如...
    c94101e8b6e99427977a5bfe48615a86.png

    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);    }  }});

    使用指令:

    新增

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

    4. 总结

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


    公众号: Java码农

    展开全文
  • 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 自定义指令 实现 按钮权限

    千次阅读 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)) { ...

    1.登录成功后,获取后台返回所有的按钮权限id,存到sessionStorage中

    2.在main.js中自定义指令

    const has = Vue.directive('has', {
      inserted: function (el, binding) {
        // 获取按钮权限
        if (!Vue.prototype.$_has(binding.value)) {
          el.parentNode.removeChild(el)
        }
      }
    })
    Vue.prototype.$_has = function (value) {
      let isExit = false
      let buttonpermsStr = sessionStorage.getItem('buttonpermissions')
      if (buttonpermsStr === undefined || buttonpermsStr === null) {
        return false
      }
      for (let i = 0; i < buttonpermsStr.length; i++) {
        if (value === buttonpermsStr[i]) {
          isExit = true
          break
        }
      }
      return isExit
    }
    export {has}

    3.在按钮上直接写上v-has="后台返回的按钮id"

    <el-button class="btns" @click="delItem" v-has="'666'">删除</el-button>

     

    展开全文
  • 业务需求除了路由需要控制外点击按钮也需要做到控制,百度了vue2相关资料发现大部分都是使用自定义指令实现控制按钮显示和隐藏,刚好手头上做了个demo 写个文档记录下; vue2和vue3directive的函数也不一样 bind → ...

    业务需求除了路由需要控制外点击按钮也需要做到控制,百度了vue2相关资料发现大部分都是使用自定义指令实现控制按钮显示和隐藏,刚好手头上做了个demo 写个文档记录下;
    vue2和vue3directive的函数也不一样

    bind → beforeMount
    inserted → mounted
    beforeUpdate: new! this is called before the element itself is updated, much like the component lifecycle hooks.
    update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
    componentUpdated → updated
    beforeUnmount: new! similar to component lifecycle hooks, this will be called right before an element is unmounted.
    unbind -> unmounted
    

    前置条件

    首先路由的meta中需要包含按钮的权限信息方便获取;例如:
    在这里插入图片描述
    新建一个vuex模块或者新建一个reactive响应式文件存储值
    在这里插入图片描述
    在Layout里存储权限值(Layout是所有路由视图的公共组件)

    ...
    import { useStore } from "vuex";
    import { useRoute } from 'vue-router'
    ...
    export default {
    	setup() {
    		const store = useStore();
    		const $route = useRoute();
    		
    		watchEffect(() => {
    			const { add, edit, detail, del, more } = $route.meta;
    			const role = { add, edit, detail, del, more };
    			for(const item in role) {
    	        	store.commit('role/setRole', { name: item, type :role[item] })
    	      	}
    		}
    	}
    }
    

    注册全局指令
    在main.js中输入

    ...
    import store from './store'
    const app =  createApp(App);
    
    app.directive('permission', {
    	mounted(el, binding) {
    		if (!store.state.role[binding.value]) {
    			el.parentNode && el.parentNode.removeChild(el)
    		}
    	}
    }
    ...
    

    在需要用到控制权限的button按钮上输入

    <a-button v-permission="'add'" type="primary" @click="onSubmit">确 定</a-button>
    

    就可以轻松实现按钮的控制了

    参考资料:
    vue 官方文档
    vue3 directive挂载生命周期
    directive el.parentNode为null的相关处理

    展开全文
  • 使用 Vue.directive(id, [definition]) 定义全局的指令来进行自定义指令 思路:在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面...
  • 接下来我们通过使用自定义指令来解决一个开发过程中的实际需求:按钮权限管理。2. 分析在管理系统中,不可避免的需要有权限管理模块。权限的划分可大可小。对于前端页面来讲,大一点的权限如菜单权限,小一点的如...
  • 针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建个 array.js 文件,用于存放与权限相关的全局函数; // array.js export function checkArray (key) { let arr = ['1', '2', '3', '4', 'demo'] let...
  • 接下来我们通过使用自定义指令来解决一个开发过程中的实际需求:按钮权限管理。2. 分析在管理系统中,不可避免的需要有权限管理模块。权限的划分可大可小。对于前端页面来讲,大一点的权限如菜单权限,小一点的如...
  • 主要介绍了基于vue自定义指令实现按钮权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 最近公司的老项目进行重构,前端技术栈也从原来的 AngularJS 转到 Vue,在架构到页面按钮级别的权限这一块时,我打算利用 vue 的自定义指令实现。今天就来记录一下实现方式,话不多说,直接上代码。 v-permission ...
  • 在后台管理项目上经常要求权限控制到按钮级,既如果当前登录用户没有新建、编辑、删除等权限就无法看到对应的功能按钮,这种需求可以使用vue的自定义指令实现 首先针对自定义指令进行封装 在util文件夹内新建...
  • 全局注册自定义指令: /权限指令/ Vue.directive(‘has’, { inserted: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { ...自定义指令防止按钮多次点击重复提交表单: Vue.directive(‘noMoreC...
  • 思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过... 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮权限的数组,

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 146
精华内容 58
关键字:

自定义指令实现按钮权限