经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记。

Vue实现的中后台管理系统。按钮操作权限的空置一般都是通过自定义指令Vue.directive

<el-button v-has="fq-pms" type="primary">按钮</el-button>

通常我们会把从后台请求过来的数据存贮到Vuex或localStorage,接下来我们先注册一个全局自定义指令并监控它

Vue.directive('has',{
bind:function(el,binding){
const permissons = ['lcj'] //指令列表
   if (has(binding.value, permissions)) {
el.parentNode.removeChild(el);//调用元素父级删除,有时候父元素未渲染出来可以把bind换成inserted
}
}
})

has函数

function has(value, permissions) {
let isExist = true;
if (permissions === undefined||permissions===null || permissions.length === 0) {
return true;
}
for (let i = 0; i < permissions.length; i++) {
if (permissions[i] === value) {
isExist = false;
break;
}
}
return isExist;
}

bind是Vue.directive的五个生命周期(钩子函数),按照生命周期 bind>inserted>update>componentUpdate>unbind

  1. bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  2. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
  3. update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  4. componentUpdate:指令所在组件的 VNode 及其子 VNode 全部更新后调用
  5. unbind:只调用一次,指令与元素解绑时调用  

一般是通过操作权限是通过按钮的,菜单权限是通过前端路由和后台路由来判断的。下章会介绍Vue-router配置后台路由实现菜单权限的

Vue笔记--通过自定义指令实现按钮操作权限的更多相关文章

  1. Vue自定义指令实现按钮级权限控制功能

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住 ...

  2. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  3. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

  4. vue组件、自定义指令、路由

    1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  5. 【Vue】通过自定义指令回顾 v-内置指令

    Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...

  6. 在Vue中通过自定义指令获取元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Eleme ...

  7. Vue.js:自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

  8. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  9. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...

随机推荐

  1. SpringBoot配置文件yml ScannerException: while scanning an alias *

    在使用yml编写配置我呢见 management: endpoints: web: base-path: /actuator jmx: exposure: include: * 报了如下错误 解决方案 ...

  2. 动态SQL与变量绑定

    有时候动态sql需要进行变量的赋值,这个时候就需要调用系统的存储过程sp_executesql了.使用中还是有些注意事项,代码如下: --字符型字段需声明为NVARCHAR类型 ),) --动态SQL ...

  3. C# show Environment property info name and value retrieve, Maximize the Console Window based on window resolution

    using System.Reflection; static void ShowEnvironmentInfoDemo() { Type type = typeof(Environment); Pr ...

  4. Java - 变量常量数据类型

    标识符命名规范 可以有字母数字下划线和美元符组成, hello abc 不能以数字开头 123abc 严格区分大小写 void Void 不能是java的关键字和保留字 class 标识符必须是见名知 ...

  5. Java基础专题

    Java后端知识点汇总——Java基础专题 全套Java知识点汇总目录,见https://www.cnblogs.com/autism-dong/p/11831922.html 1.解释下什么是面向对 ...

  6. SpringBoot启动项目时提示:Error:(3, 32) java: 程序包org.springframework.boot不存在

    场景 在IDEA中新建SpringBoot项目,后启动项目时提示: Error:(3, 32) java: 程序包org.springframework.boot不存在 实现 将pom.xml中par ...

  7. Object-C里的类目,延展,协议

    1.类目 类目就是为已存在的类添加新的方法.但是不能添加实例变量.比如系统的类,我们看不到他的.m文件,所以没有办法用直接添加方法的方式去实现. @interface NSMutableArray ( ...

  8. Android8.1 源码修改之通过黑名单屏蔽系统短信功能和来电功能

    前言 之前写过一篇Android6.0 的屏蔽系统短信功能和来电功能,具体看这里 同样的最近有个新需求,需要将8.1 设备的来电功能和短信功能都屏蔽掉,特殊产品就是特殊定制,那就开始吧. 屏蔽短信功能 ...

  9. 团队项目之Scrum1

    小组:BLACK PANDA 时间:2019.11.16 部分 得分项 分数 完成内容 第 1 篇 Scrum 冲刺博客 各个成员在 Alpha 阶段认领的任务 3 明日各个成员的任务安排 3 用户登 ...

  10. 035.[转] 获取HttpServletRequest请求Body中的内容

    注意: HttpServletRequest 请求中的 body 内容仅能调用 request.getInputStream(), request.getReader()和request.getPar ...