如何将Vue自定义指令与动态路由结合实现权限控制的优化？

本文共计761个文字，预计阅读时间需要4分钟。

功能概述：+ 根据后端返回接口，实现路由动态显示+ 实现按钮（HTML元素）级别权限控制+ 包含知识要点：路由守卫、Vuex使用、Vue自定义指令、导航守卫、前端工程化采用Github开源项目、Vue-element-admin等

功能概述：

• 根据后端返回接口，实现路由动态显示
• 实现按钮（HTML元素）级别权限控制
  

涉及知识点：

• 路由守卫
• Vuex使用
• Vue自定义指令
  

导航守卫

前端工程采用Github开源项目Vue-element-admin作为模板，该项目地址：Github | Vue-element-admin 。

在Vue-element-admin模板项目的src/permission.js文件中，给出了路由守卫、加载动态路由的实现方案，在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动，就能将基于角色加载路由改造为基于权限加载路由。

导航守卫：可以应用于在路由跳转时，对用户的登录状态或权限进行判断。项目中使用全局前置守卫。参考Vue官方文档：router.vuejs.org/zh/guide/advanced/navigation-guards.html

后台返回接口

权限系统后台采用基于角色的权限控制方案（role-based access control），如上图所示，
该用户信息接口将查询用户所具有的所有角色，再将这些角色的权限并集按照路由 - 操作整合在一起返回。在用户登录入系统后，我们从后台请求获得用户信息（个人信息 + 权限信息），作为全局属性储存在前端。不同权限的用户看到的页面不同，依赖于这些属性，它们决定了路由如何加载、页面如何渲染。

这种多个组件依赖一组属性的场景，Vue提供了VueX作为全局状态管理方案。

使用VueX存储权限信息

在src/store/moudules目录下定义permission.js

1.定义异步方法，方法内部包含HTTP请求从后台拉取数据

import www.jb51.net/article/194361.htm
下拉菜单上增加控制：

相应数据定义中增加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自定义指令和动态路由的资料请关注易盾网络其它相关文章！