当开发管理背景时，将有多个字符登录。登录成功后，不同的字符将显示不同的菜单路由。这是我们通常称为动态路由权限的内容。有许多计划实现路由权限。它通常用于使用AddRoutes（v3版本来添加）动态安装路由和服务器侧路由菜单访问路由菜单。两种类型。上一篇文章讨论了路由权限的纯前端 - 端端。如果尚未阅读，则可以单击文章以链接纯前端以实现VUE路由权限。图案，它主要基于后端返回菜单以实现路线权限。
后端返回菜单主要是在我们登录之后，后端接口将直接返回到当前用户可以访问的完整路由，该路由等效于前端 - 端RBAC模型筛选前端 -可访问的路由列表。
应该注意的是，后端返回的路由菜单不包括登录，404和其他页面。前端仍然需要编写完整的路由列表。基于可访问的路由器菜单返回到后端，以筛选需要安装在路由器上的路由列表。
登录首先登录。登录成功后，服务器将返回登录用户的可访问路由菜单Usermenus。我们通常将此信息保存到VUEX中。
登录方法：
Vuex对应于异步操作：
接口返回的路由菜单信息：
路由菜单
可以看出，返回的usermenus是一个包含重要信息的数组页面的侧面，路由类型用于筛选需要安装在路由器上的路由列表。
本地路由列表的前端仍然需要编写一个完整的路由列表。我计划编写一个菜单，其中未在路由器/索引中返回接口，例如登录，404和其他页面。
路由器/index.ts：
路由器/主要菜单是所有菜单的列表：
单个菜单的内容，例如dashboard.ts：
整个路由器目录：
路由器目录
接下来，我们需要根据usermenus过滤路由器/主体下方的路由，即接口返回的路由列表列表，然后将路由列表安装在路由器上，以便可以访问路由。
现在生成路由，我们需要根据Usermenus生成相应的路由。
首先，我们需要加载所有路由，即路由器/main下的路由文件的内容。在这里，我使用require.context方法来加载所有路由。
这是对require.conxt的简要介绍。
require.context是WebPack的API。通过执行require.context（）函数，要在指定文件夹中获取特定文件，可以自动介绍需要多次从同一文件夹导入的模块。对每个显示的导入导入。
require.context（目录，useubDirectories，regexp）：
我们通过此API在路由器/主机下载路线。
我们在Routefiles上打印：
路由
获得一个对象，我们需要穿越此对象以获取文件内容：
打印可以得到路线
路线
这样，我们得到了所有路由，并将它们放入了Allroutes。
接下来，我们需要根据Usermenus获得需要添加的路线。
在开始时，我们提到了路线类型。该字段主要是菜单下面是否有子-Menu。1表示有一个子元，2表示没有sub -menu。
接口返回的菜单
我们遍历了Allroutes，然后根据Usermenus中的路径进行比较，这是路径返回的菜单列表。如果匹配相同，那么我们需要此路线，否则该路线将被过滤出来。由于可能仍然存在每个Allroutes，因此我们还需要在此处递归筛选。具体方法如下：
最后，路由是与我们获得的Usermenus相对应的路由列表。
相应路由的逻辑排列如下：
在安装路线的尽头，我们需要安装我们上路的路线。
仍将路由的时间安排在全球路线后卫上。我们在路由器文件夹下创建一个允许的ts，以编写全局路由保护的相关逻辑：
routesModule文件下的代码：
这样，完整的路由授权就可以完成。我们可以查看页面：
系统接口
与纯前端实现路由权限相比，这种后端路由菜单的这种方法看起来更简单。我们不需要通过RBAC来过滤用户可以访问的路由，但是接口直接返回到我们。需要生成与路由菜单相对应的路由，然后安装路由。
原始：https：//juejin.cn/post/7096393921034453006