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

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

• 上篇讲完了如何对接真实的登录接口，并且已经调试成功，并且继续往下执行，调用了一个404的接口
• 接下来再继续往下讲
• 如果你不知道在哪调用这个方法，就直接复制接口地址auth/buttons，全局搜索一下

image.png

• 然后再全局检索一下getAuthButtonListApi这个方法是在哪里调用的
• image.png
• 然后再全局检索getAuthButtonList方法

image.png

• 我们一层一层的找，终于是找到了在哪里调用的，当然这是最笨的方法，如果再第一课，你已经掌握了，你就会知道，这个方法在哪里调用，直接就可以打开了，不用这么麻烦。
• 其实我们这个项目实现按钮权限不用这个方式，这个方法可以注释掉或者删除掉。

image.png

• 下面在输入账号密码，点击登录试试，会发生什么

image.png

• 嘿，进去了～
• 但是，要想实现动态路由、权限管理，还需要在多请求一个接口
• 如果你之前学过我的vue2实现的动态路由权限管理，就会知道
• 我们在登录接口后，立马执行了一个getInfo获取用户信息的接口
• 而这个项目没有，所以要补上他
• 下面我们就要简单学下pinia状态管理器怎么用了，getInfo这个方法就是要写在pinia里的

下面讲如何使用pinia创建方法，以及调用方法

• 其实呢，先搞明白在哪里调用这个方法呢，登录接口触发后立即就会触发initDynamicRouter这个方法，你还记得吗，所以在这里，可以把刚刚注释的getAuthButtonList方法改成getAuthInfo

image.png

• 但是会报错，因为getAuthInfo还没在pinia里创建，自然会报错
• 那就去创建吧，全局搜索geeker-auth这个，就能找到位置
• 打开文件，src/stores/modules/auth.ts

image.png

• 在state里新建一个变量userInfo来存储用户信息，但是会报错，原因就是，
  对象字面量只能指定已知属性，并且“userInfo”不在类型“AuthState”中。
• 那就打开AuthState,路径src/stores/interface/index.ts

image.png

• 果然是没有 userInfo，报错可以原谅～
• 那应该怎么解决呢？先说明一下，getInfo接口我是没有的，所以我这边直接使用json假数据，也方便我们调试
• 先来解决没有 userInfo的问题
• 在authButtonList: { [key: string]: string[]; };下面新写一行，userInfo: {};然后state那里就暂时不会报错了。
• 然后，照葫芦画瓢，我们也在getters里新写一行代码

 // 个人信息以及权限标识信息对象
 userInfoGet: state => state.userInfo,

• 然后在actions里也新建一个异步方法

// Get UserInfo
    async getAuthInfo() {
      const { data } = await getAuthInfoApi();
      this.userInfo = data;
    }

• 如果你保存代码，项目的await authStore.getAuthInfo();这行代码不会飘红了，但是await getAuthInfoApi();会飘红，getAuthInfoApi我们还没有新建这个api方法，接下来，就在src/api/modules/login.ts里新建一个，代码如下：

// 获取用户信息
export const getAuthInfoApi = () => {
  // 这里直接引入本地数据
  return userInfo;
};

• 当然return的userInfo还没有，我们来新建并引入过来
• 在src/assets/json文件夹下，新建userInfo.json，json内容暂时就这么多，后面再加

{
  "code": 200,
  "data": {
    "id":10010,
    "name":"陈瑞"
  },
  "msg": "成功"
}

• 然后在src/api/modules/login.ts内引入

import userInfo from "@/assets/json/userInfo.json";

• 然后在src/stores/modules/auth.ts再引入getAuthInfoApi

import { getAuthButtonListApi, getAuthMenuListApi, getAuthInfoApi } from "@/api/modules/login";

• 我们通过查看devtool工具，可以看到，用户信息已经存到了pinia中

image.png

ok,我们下一节再讲如果实现动态路由！！！