一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
前言
在上一章中，我们分析了侧边栏aside中菜单的icon图标，那接下来我们根据这个菜单着重说一下权限问题。
菜单分析
数据从哪里来
一般来说想做好权限管理那就不是光靠前端可以解决的，自然要配合后端获取对应角色的数据。前面我们使用了MOCK数据现在就派上了用场。mock数据如何使用我们后面出单独的一篇来讲解，这里先贴出部分模拟后端给我们的数据：
这里我贴出来的是经典的两种类型，一个是有父级菜单的（图一），可以看到parentNo有具体的数据，一个是没有父级菜单的（图二），可以看到parentNo没有具体的数据（表现为"0"），其中是否有子集的根据为childrenNum,如果为0则代表没有子集，如果不为0则代表有子集。
数据如何构造
根据多级菜单的格式可以看出来，后端给我们的数据是扁平式的，并不能满足我们的需求，我们需要的是一种tree数据，所以要单独去处理数据，我们将数据处理放在store中处理。
路由如何选择
在vue2的时代中，大部分后台管理系统的路由都会选择通过动态添加，而这带来的问题是控制台会有各种警告，并且在最新的vue-router中已经不支持一次性添加路由了，只能一个个添加，这样就需要循环去添加，增加了许多工作负担。 所以我们现在选择在本地注册完路由通过权限去判断是否允许用户进入路由。
组件选择
之前我们安装了element-plus， 所以使用el-menu菜单
数据改装
1.路由鉴权：我们需要将写好的路由从router中导入，然后根据后端返回的数据进行includes判断
2.参数添加： 有许多数据是在我们前端无法直接定义的需要根据后端的数据来动态添加
3.排序：往往菜单需要展示出来的顺序是多变的，这就需要我们对路由进行排序
4.获取首个跳转页面： 我们一进来的路由是"/"，那需要重定向到哪里
