![Vue 进阶系列丨自定义指令实现按钮权限功能_第1张图片](http://img.e-com-net.com/image/info8/b04e839ff8954a8baa359d024c157c9a.jpg)
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!
2013年7月28日,尤雨溪第一次在 GItHub 上为 Vue.js 提交代码;2015年10月26日,Vue.js 1.0.0版本发布;2016年10月1日,Vue.js 2.0发布。
最早的 Vue.js 只做视图层,没有路由, 没有状态管理,也没有官方的构建工具,只有一个库,放到网页里就可以直接用了。
后来,Vue.js 慢慢开始加入了一些官方的辅助工具,比如路由(Router)、状态管理方案(Vuex)和构建工具(Vue-cli)等。此时,Vue.js 的定位是:The Progressive Framework。翻译成中文,就是渐进式框架。
Vue.js2.0 引入了很多特性,比如虚拟 DOM,支持 JSX 和 TypeScript,支持流式服务端渲染,提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。
Vue 已是一名前端工程师必备的技能,现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧!
什么是自定义指令
有关自定义指令的相关内容,请移步Vue 进阶系列丨自定义指令
适用业务场景
这里简单介绍一下,本篇文章主要解决的业务场景是什么样子的。
在后台管理平台中,我们的菜单权限是根据用户角色的不同动态变化的。
比如说,超级管理员能看到所有的菜单列表(这里说的菜单就是管理平台当中的侧边导航或顶部导航);普通用户只能看到首页等常见的菜单,对于权限比较高的页面,比如说机构管理、角色管理、用户管理等页面,普通用户是看不到的。
这个时候,前端针对菜单的权限,就要采取一些措施了,具体操作请移步Vue 进阶系列丨权限控制 addRoute()
我们这里要讲解的是,针对某个页面的按钮进行权限控制,比如说,角色A的用户拥有机构管理的新增、删除、编辑权限;角色B的用户,拥有机构管理的编辑权限。那么对于角色B的用户来说,机构管理页面中,新增和删除按钮应该是不可见的。这个时候,仅仅是菜单权限控制是满足不了此需求的。
实现步骤
1. 用户登录成功时,将用户权限数据,存入sessionStorage中
// login.vue
1. 在项目根目录下新建一个 permission.ts 文件(这里是以vue-ts为例的)
// permission.ts
// 引入vue中定义的指令对应的类型定义
import { Directive } from 'vue'
export const permission: Directive = {
// 这是指令的一个生命周期
mounted(el, binding) {
// 获取用户使用自定义指令绑定的内容
const { value } = binding;
// 获取用户所有的权限
const permissions = sessionStorage.getItem('permission')
// 判断用户使用自定义指令,是否使用正确了
if (value && value instanceof Array && value.length > 0) {
// 判断传递进来的按钮权限,用户是否拥有
const hasPermission = permissions.some((per) => {
return value.includes(per)
})
if (!hasPermission) {
// 当用户没有这个按钮权限时,隐藏这个按钮
el.style.display = 'none'
}
} else {
throw new Error('按钮权限指令示例: v-permission="['organization:add']"')
}
}
}
// 注意,我们这里写的自定义指令,传递内容是一个数组,也就说,按钮权限可能是由
// 多个因素决定的,如果你的业务场景只由一个因素决定,自定义指令也可以不传递一个数组,
// 只传递一个字符串就可以了
3. 挂载到全局
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引用刚刚定义的自定义指令
import { permission } from './permission.ts'
// 注册自定义指令
createApp(App).directive('permission',permission)
4. 在页面中使用,这里我们在机构管理的页面中使用
// organization.vue