vue-router路由权限控制的两种实现方案

前言

最近在抽时间写一套后台管理系统框架模板（vue+element-ui），记录一些问题的解决方案。文章没什么顺序，就想到什么写什么了，也都是之前工作上碰到的问题。

抛出问题

Vue项目路由权限控制怎么实现？

实现

大体上实现的思路很简单，先上图：

无非是将路由配置按用户类型分割为 用户路由 和 基本路由，不同的用户类型可能存在不同的 用户路由，具体依赖实际业务。

用户路由: 当前用户所特有的路由

基本路由：所有用户均可以访问的路由

实现控制的方式分两种：

• 通过vue-router addRoutes 方法注入路由实现控制
• 通过vue-router beforeEach 钩子限制路由跳转

addRoutes 方式：

通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。

beforeEach 方式</