Vue | 自定义指令和动态路由实现权限控制
功能概述:
- 根据后端返回接口,实现路由动态显示
- 实现按钮(HTML元素)级别权限控制
涉及知识点:
- 路由守卫
- Vuex使用
- Vue自定义指令
导航守卫
前端工程采用Github开源项目
Vue-element-admin
作为模板,该项目地址:Github | Vue-element-admin 。
在Vue-element-admin
模板项目的src/permission.js文件中,给出了路由守卫、加载动态路由的实现方案,在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动,就能将基于角色加载路由改造为基于权限加载路由。
导航守卫:可以应用于在路由跳转时,对用户的登录状态或权限进行判断。项目中使用全局前置守卫。参考Vue官方文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
后台返回接口
权限系统后台采用基于角色的权限控制方案(role-based access control
),如上图所示,
该用户信息接口将查询用户所具有的所有角色,再将这些角色的权限并集按照路由 - 操作整合在一起返回。在用户登录入系统后,我们从后台请求获得用户信息(个人信息 + 权限信息),作为全局属性储存在前端。不同权限的用户看到的页面不同,依赖于这些属性,它们决定了路由如何加载、页面如何渲染。
这种多个组件依赖一组属性的场景,Vue提供了VueX
作为全局状态管理方案。
使用VueX存储权限信息
在src/store/moudules
目录下定义permission.js
1.定义异步方法,方法内部包含HTTP请求从后台拉取数据
import http from '../../axios';
async function getUserInfo() {
const res = await http.getUserInfo();
return res;
}
使用await
关键字,保证执行顺序正确。这里是为了保证能拿到接口返回的内容,以便于下一步处理。
const actions = {
getPermissions({ commit }) {
return new Promise(resolve => {
getUserInfo().then(res => {
if (res) {
let permissionList = res.permissionList;
commit('SET_PERMISSIONS', permissionList);
// 根据后台返回的路由,生成实际可以访问的路由
let accessRoutes = filterAsyncRoutesByPermissions(asyncRoutes, permissionList);
commit('SET_ROUTES', accessRoutes);
commit('SET_USER_INFO', { name: res.name, accountName: res.accountName })
resolve(accessRoutes);
} else {
resolve([]);
}
}).catch(() => resolve([]));
})
}
}
VueX中action定义异步方法。
2. 定义静态、动态路由
src/router/index.js
静态路由:
export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index'),
},
],
,
...
{
path: '/404',
component: () => import('@/views/error-page/404'),
hidden: true,
}
];
动态路由:
export const asyncRoutes = [
{
path: '/system',
component: Layout,
name: '系统管理',
meta: { title: '系统管理', icon: 'el-icon-user', affix: true },
children: [
{
path: '/system',
component: () => import('@/views/management/system/Index'),
meta: { title: '系统管理', icon: 'el-icon-setting', affix: true },
},
],
}
...
]
静态路由中定义了所有用户均可访问的路由,动态路由中定义了动态加载的路由。
3.根据权限过滤并排序路由
export function filterAsyncRoutesByPermissions(routes, menus) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
let index = menus.map(menu => menu.url).indexOf(tmp.path);
if (index != -1) {
// 后端返回路由信息覆盖前端定义路由信息
tmp.name = menus[index].name;
// debugger;
tmp.meta.title = menus[index].name;
tmp.children.forEach(child => {
if (child.path == tmp.path) {
child.meta.title = tmp.meta.title;
}
})
res.push(tmp)
}
});
// 根据返回菜单顺序,确定路由顺序
/**
* TODO 子菜单排序
*/
res.sort((routeA, routeB) => menus.map(menu => menu.url).indexOf(routeA.path) - menus.map(menu => menu.url).indexOf(routeB.path))
return res
}
根据url匹配,匹配到url的路由则加入数组。最终用户可以访问的路由 = 允许访问的动态路由 + 不需要权限的静态路由。
4.src/permission.js中的处理逻辑
// 引入store
import store from './store';
const whiteList = ['/login', '/auth-redirect']; // no redirect whitelist
// 路由守卫
router.beforeEach(async (to, from, next) => {
//start progress bar
NProgress.start()
if (hasToken) {
if (to.path === '/login') {
// ... 省略登出逻辑
NProgress.done();
} else {
// 查看是否已缓存过动态路由
const hasRoutes = store.getters.permission_routes && store.getters.permission_routes.length > 0;
if (hasRoutes) {
next();
} else {
try {
const accessRoutes = await store.dispatch('permission/getPermissions');
router.addRoutes(accessRoutes);
const toRoute = accessRoutes.filter((route) => route.path == to.path);
next({ path: toRoute.length > 0 ? toRoute[0].path : accessRoutes[0].path, replace: true });
} catch (error) {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next();
} else {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
});
router.afterEach(() => {
// finish progress bar
NProgress.done();
});
以上是动态路由实现方案。
Vue
支持自定义指令,用法类似于Vue原生指令如v-model
、v-on
等,网上查阅到的大部分细粒度权限控制方案都使用这种方法。下面将给出我的实现。
自定义指令
自定义指令 v-permission
:
src/directive/permission/index.js
import store from '@/store'
export default {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters && store.getters.permissions;
if (value) {
// 获取当前所挂载的vue所在的上下文节点url
let url = vnode.context.$route.path;
let permissionActions = permissions[url];
// console.log(permissionActions)
const hasPermission = permissionActions.some(action => {
if (value.constructor === Array) {
// 或判断: 只要存在任1,判定为有权限
return value.includes(action);
} else {
return action === value;
}
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`need further permissions!`)
}
}
}
后端给出的权限数据是路由(url)与操作的对应Map,url可以通过将要挂载到的vnode属性拿到。这个方法有点类似于AOP,在虚拟元素挂载之后做判断,如果没有权限则从父元素上移除掉。
使用方法:
- 举例一:单个按钮 (注意双引号套单引号的写法)
<el-button @click.native.prevent="editUser(scope.row)" type="text" size="small" v-permission="'op_edit'">
编辑
</el-button>
- 举例二:或判断(传入数组),只要拥有数组中一个权限,则保留元素,所有权限都没有,则移除。
在上一篇博客https://www.jianshu.com/p/066c4ce4c767
下拉菜单上增加控制:
相应数据定义中增加action属性。
该方法无法覆盖所有场景,所以依然给出相应工具类:
/**
*
* @param {*当前页面路由} url
* @param {*操作code e.g op_add } value
* @return true/false 是否有该项权限
*/
function checkPermission(url, value) {
const permissions = store.getters && store.getters.permissions;
let permissionActions = permissions[url];
if (!permissionActions) {
return false;
}
let hasPermission = permissionActions.some(action => {
if (value.constructor === Array) {
// 或判断: 只要存在任1,判定为有权限
return value.includes(action);
} else {
return action === value;
}
});
return hasPermission;
}
以上完成按钮粒度权限控制。
Vue | 自定义指令和动态路由实现权限控制的更多相关文章
- Vue自定义指令实现按钮级权限控制功能
思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- vue自定义指令要点
vue自定义指令的基础使用这里就不阐述,看官网文档:https://cn.vuejs.org/v2/guide/custom-directive.html 本文用一个实例描述自定义指令的要点,自定义一 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错:Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
随机推荐
- Python自动化运维 技术与最佳实践PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书
点击获取提取码:7bl4 一.内容简介 <python自动化运维:技术与最佳实践>一书在中国运维领域将有"划时代"的重要意义:一方面,这是国内第一本从纵.深和实践角度探 ...
- Xposed原理分析
目录 安卓系统启动 什么zygote? 安卓应用运行? Xposed介绍 Xposed构成 Xposed初始化大体工作流程 源码分析 初始化 app_main#main app_main#initia ...
- 银弹谷零代码开发V百科|使用技巧:OMG!这些时间日期函数太好用了吧,盘它
银弹谷零代码开发V百科|使用技巧:OMG!这些时间日期函数太好用了吧,盘它 Hello~everybody!小V又来咯!这次小V给大家带来的是零代码开发V平台常用的时间日期函数.小V知道我们平时常常会 ...
- ios 常用的正则表达式(手机号邮箱md5加密验证空字符串等)
可以写一个nssring的category 给nsstring 增加一些方法,而这些方法就是一些正则表达式. 比如写一个叫做Helper的类 创建完了就是 NSString+Helper 然后在进行 ...
- 面试被问:如果系统 CPU 突然飙升且 GC 频繁,你该如何排查?
出自:开源中国 原文:系统运行缓慢,CPU 100%,以及Full GC次数过多问题的排查思路 处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题. ...
- mysql主主半同步
1.半同步概述 先了解下mysql的几种复制 异步复制MySQL复制默认是异步复制,Master将事件写入binlog,提交事务,自身并不知道slave是否接收是否处理:缺点:不能保证所有事务都被所有 ...
- SpringBoot设置跨域的几种方式
什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 原因: 由于浏览器的同源策略, 即a网站只能访问a网站的内容,不能访问b网站的内容. 注意: 跨域问题 ...
- 洛谷 P4198 楼房重建
思路 此题可转化为以下模型 给定序列\(a[1...n]\),支持单点修改,每次求区间单调栈大小 \(n,Q\le 10^5\) 区间单调栈是什么呢?对于一个区间,建立一个栈,首先将第一个元素入栈,从 ...
- 2020-06-18:ZK的分布式锁怎么实现?
福哥答案2020-06-18: Zk分布式锁有两种实现方式一种比较简单,应对并发量不是很大的情况.获得锁:创建一个临时节点,比如/lock,如果成功获得锁,如果失败没获得锁,返回false释放锁:删除 ...
- C#LeetCode刷题-几何
几何篇 # 题名 刷题 通过率 难度 587 安装栅栏 21.5% 困难 892 三维形体的表面积 C#LeetCode刷题之#892-三维形体的表面积(Surface Area of 3D Sh ...