首先我们想要尝试在页面上展示我们的个人头像与个人名称，我们需要根据我们login所存储的本地token采用请求响应器在头部加上token。

1
2
3
4
5
6
7
8
9
10
request.interceptors.request.use((config) => {
  //获取用户相关的小仓库:获取仓库内部token,登录成功以后携带给服务器
  const userStore = useUserStore()//调用我们的小仓库 获取小仓库里面的数据
  if (userStore.token) { //如果locolstorage中存储了token数据
    config.headers.token = userStore.token
  }
  //config配置对象,headers属性请求头,经常给服务器端携带公共参数
  //返回配置对象
  return config
})
image-20220916103141323

在组件挂载中调用仓库action函数获取user信息其中userInfo信息获取定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//获取用户信息方法
    async userInfo() {
      //获取用户信息进行存储仓库当中[用户头像、名字]
      const result: userInfoReponseData = await reqUserInfo()

      //如果获取用户信息成功，存储一下用户信息
      if (result.code == 200) {
        this.username = result.data.checkUser.name//这边运行出现过错误
        this.avatar = result.data.checkUser.avatar
        this.buttons = result.data.checkUser.buttons
        //目前路由器管理的只有常量路由:用户计算完毕异步路由、任意路由动态追加
        console.log('ddd', result.data.checkUser)

        return 'ok'
      } else {
        return Promise.reject(new Error(result.message))
      }
    },

其中API，reqUserInfo定义如下：

1
2
export const reqUserInfo = () =>
  request.get<any, userInfoReponseData>(API.USERINFO_URL)

其中mock定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 获取用户信息
 {
   url: '/api/user/info',
   method: 'get',
   response: (request) => {
     //获取请求头携带token
     const token = request.headers.token
     //查看用户信息是否包含有次token用户
     const checkUser = createUserList().find((item) => item.token === token)
     console.log('mmm', checkUser)
     //没有返回失败的信息
     if (!checkUser) {
       return { code: 201, data: { message: '获取用户信息失败' } }
     }
     //如果有返回成功信息
     return { code: 200, data: { checkUser } }
   },
 },

最终主页面显示如下：

image-20220916103141323