如何将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文件中，给出了路由守卫、加载动态路由的实现方案，在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动，就能将基于角色加载路由改造为基于权限加载路由。

导航守卫：可以应用于在路由跳转时，对用户的登录状态或权限进行判断。项目中使用全局前置守卫。