基于Geeker-Admin后台管理模版实现动态路由，权限管理0

接上篇 基于Geeker-Admin后台管理模版实现动态路由，权限管理04

• 上篇讲到：我们对接了获取用户信息getInfo接口，也简单学了一下怎么使用pinia，回头我们专门来设计一堂课从0来学习下怎么使用pinia、敬请期待～
• 那么这节课，我们来学习下，怎么实现动态路由吧。

• 课前说明，之前vue2基于vue-admin-element模版来开发权限管理、动态路由需求时，分为，前端主导和后端主导两种形式。

• 后端主导就是后端存储vue路由表信息，通过接口返回给前端动态渲染路由，对应的前端页面会有一个菜单管理的页面，来对路由进行增删改查。
• 前端主导就是前端将所有路由都写在router.js文件内，通过后端返回的权限标识，动态匹配展示某些路由。
• 那么在Geeker-Admin这个开发模版中，我们直接采用前端主导即可，也就是路由信息全部在前端写死，然后通过后端返回的权限标识，来动态匹配，动态渲染对应的路由即可。
• 具体怎么做呢？

• 第一步：先来琢磨一下，目前页面中的两个路由页面，是怎么渲染出来？我们先来找捋一下执行逻辑。

image.png

• 可以很清晰的看到，在执行完登录接口后，直接就调用了initDynamicRouter添加动态路由方法，那我们就点进去这个方法看逻辑

image.png

• 又可以很清晰的看到，调用了pinia中的 getAuthMenuList方法，继续顺藤摸瓜
• 摸到最后，就可以看到是请求的return出来的本地json文件，authMenuList.json
• 最后使用pinia的getters，可以理解为克隆，copy出来了一份，flatMenuListGet

 // 菜单权限列表 ==> 扁平化之后的一维数组菜单，主要用来添加动态路由
   flatMenuListGet: state => getFlatMenuList(state.authMenuList),

• 继续看initDynamicRouter方法，主要改造一丢丢第3点

 // 3.添加动态路由
    authStore.flatMenuListGet.forEach(item => {
      item.children && delete item.children;
      if (item.component && typeof item.component == "string") {
        item.component = modules["/src/views" + item.component + ".vue"];
      }
      if (item.meta.isFull) {
        router.addRoute(item as unknown as RouteRecordRaw);
      } else {
        router.addRoute("layout", item as unknown as RouteRecordRaw);
      }
    });