这几天在开发后台管理系统的路由权限，在开始做之前，我查阅了不少资料，发现前后端分离的权限管理基本就以下两种方式：

后端生成当前用户相应的路由后由前端（用 Vue Router 提供的API）addRoutes 动态加载路由。 前端写好所有的路由，后端返回当前用户的角色，然后根据事先约定好的每个角色拥有哪些路由对角色的路由进行分配。

两种方法的不同 第一种，完全由后端控制路由，但这也意味着如果前端需要修改或者增减路由都需要经过后端大大的同意，也是我司目前采用的方式； 第二种，相对于第一种，前端相对会自由一些，但是如果角色权限发生了改变就需要前后端一起修改，而且如果某些（技术型）用户在前端修改了自己的角色权限就可以通过路由看到一些本不被允许看到的页面，虽然拿不到数据，但是有些页面还是不希望被不相关的人看到（虽然我个人jio得并没有什么关系，但是无奈leader还是偏向不想被看到不该看到的页面）。 接下来我主要讲一下第一种方式得做法以及踩的一些坑。 addRoutes 需要的数据格式 官方文档： router.addRoutes 函数签名： router.addRoutes(routes: Array<RouteConfig>) 复制代码动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 前端初始化路由 个人认为 addRoutes 可以理解为往现有的路由后面添加新的路由，所以在 addRoutes 之前我们需要初始化一些不需要权限的路由页面，比如登录页、首页、404页面等，这个过程很简单，就是往路由文件里面加入静态路由就行了，这里就不赘述了。 接下来就是设计后端路由表，确定前后端交互的数据格式。