画了5张图，助你轻松打败动态权限路由！

👨‍💻 前言

• 不知不觉最近又到了9月份，这个季节是大部分应届生和面试者找工作的季节，让我情不自禁想到了之前刚开始工作的那些事。
• 首先很后悔我没有参加校招，刚开始找工作时没有什么项目，拿着一个后台管理系统和一个小程序项目跟一个H5移动端项目就屁颠屁颠跑去面试了。
• 面试中也有被问到后台权限管理，那时候哪里懂什么是权限管理什么动态路由呀，项目中都是写死的路由也根本没做什么权限管理，给我问的一懵一懵，但是还是很幸运我表达了我对公司的喜爱跟上进的性格，还是入职了公司。
• 经过了一些时间的沉淀，对这方面也有一些理解，现在我想把关于这部分的知识讲给有需要的同学听，我会尽量讲的通俗易懂，如果有需要可以继续往下看。
• 本文参与了掘金周边礼物🎁活动哟，具体规则请看文末。

⁉️ 什么是权限管理

• 所谓权限管理顾名思义就是权力限制，不同的权力的人能干不同的事情。
• 如果你越界了，那对不起，操作无效。
• 而在我们的后台管理系统中的权限管理也是一样的意思，超级管理员能做的肯定会比管理员能做的事情要多，而这个事情其实在我们前端看来说白了就是显示了什么页面，显现了什么操作按钮。
• 那我们反过来想，所以我们的前端的目的就是为了根据不同权限的人来动态控制页面呈现和按钮的呈现，那我们通过什么来判断呢？权限表，这个权限表有些是一个权限数组,有些是提前规定好不同角色的权限通过返回一个角色来分辨，具体的还得跟后端进行配合。
• 这个权限表我们什么时候获取会是最合理呢，那无疑就是登录的时候了，所以我们的流程大概是这样的：

• 登录系统获取token
• 根据token获取用户信息（权限表等）
• 根据权限表等信息动态添加前端路由，让不同的人看见不同的页面

❣️ 路由是怎么做到动态的

• 我们知道了权限来限制不同的页面展示并跳转，那我们的页面跳转通过什么来控制呢？没错，是路由。
• 每次我们进入另一个页面的时候事实上就是进入不同的路由，这时候我们可以使用路由守卫来进行一些操作限制。
• 我们可以在这里判断cookie是否存有token，如果没有则会进入到登录页进行登录获取token和权限等信息。
• 我们可以根据权限来组装路由表 (关于路由表组装会在下文介绍) 进而通过router.addRoutes添加路由，并把这些信息存储在vuex里面，我们的tabbar侧边栏等可以根据这些信息来控制样式又或者是显示隐藏。
• 说白了，关于动态路由我们的步骤大概是这样的：

• 我们通过在路由跳转前拦截对登录状态进行判断
• 如果登录就放行，未登录就去登录并存储各种权限和信息
• 根据这些权限来进行路由组装完善我们的前端路由

💗 路由放在哪

• 现在我们都知道需要通过后端返回的权限来进行路由表的组装，再通过router.addRoutes添加路由，那我们的路由表其实根据不同的项目也有不同的存放方法。
• 
  

放在前端

• 放在前端控制的经典案例就是花裤衩大佬的vue-element-admin，相信大部分人的权限路由都是看花裤衩入的门，这里我就不过多写入源码了，如果有需要的可以自行品尝。
• 回到主题，路由表放在前端也就是我们在一个文件比如router.js把所有可能用到的路由都先定义好：

/** router.js **/
export let Routes = [{
    path: '/',
    redirect: '/home/index'
  },
  {
    path: '/home',
    component: layout,
    redirect: '/home/index',
    meta: { roles: 'home' },
    children:[
        ...
    ]
   }
]

• 定义好的路由每个都要加meta路由元信息来代表这个路由所需要的权限，通过每个路由的meta与权限表进行匹配。
• 进而获取到一个最终的路由表，而这个路由表就是我们要router.addRoutes的路由。
• 交给前端控制说白了就是干了一件事，通过用户的权限和之前在router.js里面每一个页面所需要的权限做匹配，最后返回一个该用户能够访问路由有哪些。
• 当然放在前端的优缺点也是有的：

• 逻辑清楚 代码量不多，新手看的会比较明白，比较容易上手。
• 编写繁琐 虽然路由表放在前端定义但是是写死的，每次新增模块或者修改模块都没办法动态修改，只能由前端来更改。

放在后端

• 放在后端例子也有很多，现在很多开源的管理系统后台都有一套前端跟后端配合的动态路由权限系统，就拿若依来说吧。
• 首先在前端会有一个基本路由表，这个路由表里面会包含一些初始的页面，包括固定布局页面、404页面：

// 前端未找到页面路由
const notFoundRouter = {
  path: '*',
  redirect: '/404',
  hidden: true
}
// 根级菜单
const rootRouter = {
  key: '',
  name: 'index',
  path: '',
  component: 'BasicLayout',
  redirect: '/index',
  meta: {
    title: ''
  },
  children: []
}
复制代码

• 不同的项目初始页面也各不相同，这些页面基本上是不会变的，重点在于我们接下来怎么在这个路由表里面动态添加我们页面的路由。
• 我们通过token等方法向后端请求路由接口，这时候一般会返回一个路由json，因为我们的路由表是个对象，所以我们需要在前端进行处理对最终的路由表进行拼接。
• 进而获取到一个最终的路由表，而这个路由表就是我们要router.addRoutes的路由。
• 交给后端控制说白了也就是返回所有路由json我们进行拼接添加到项目路由中，而这些都是动态的。
• 当然交给后端控制的优缺点我也说一下：

• 足够动态 一般这种系统都会有一个菜单管理，我们通过在线上进行菜单的配置就可以动态改变路由，会比在前端写死路由方便很多。
• 足够安全 因为路由表毕竟是在数据库维护，肯定多多少少会比在前端安全一些。
• 理解困难 对于刚上手动态路由的新手如果直接去阅读优秀开源的项目源码是会有点困难的。

🙋‍♂️ 现在我知道了

• 好了现在我们知道了一个动态权限路由模块也就是通过权限表 + 路由表来实现。
• 所以我们只需要搞清楚两个要素即可，当前角色权限（权限表），和完整路由表。角色权限正常来说都是由后端返回，无非就是完整路由表放在哪的问题，我上面也说了路由表的两种组装方式，根据项目的需求来选择适合自己的方式即可。
• 我们把逻辑都捋了一遍之后，假如以后有人问起你的权限路由是怎么做的，你可以这样自信的回答：

• 在不同的项目中会有不同的处理方式，而最主要的是有两个要素角色权限(权限表) 和 完整路由表。
• 权限毫无疑问是通过接口后端返回的，而无非就是路由表放在哪而已。
• 而我这边项目的逻辑是，路由表和权限表都在管理后台添加编辑。登陆后，后端返回该角色的权限列表和路由表，然后根据这个数据构建路由和菜单。

• 这样自信的说完就足够了，记得不用说太多，因为他会追问细节，接下来只需要回忆我上面的几张图就可以啦~

👉 参考

vue-element-admin

手摸手，带你用vue撸后台 系列二(登录权限篇)

动态路由前端控制还是后端控制？（附代码）

👋 写在最后

• 首先很高兴大家能阅读到这里，本文通过5张图片来帮助大家轻松打败动态权限路由，希望对大家有所帮助。
• 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛您的支持就是我更新的最大动力。