灏天阁

vue3.2/Vite/Ts33: 获取用户信息与token的理解

· Yin灏

获取用户信息

  • 原理：登录成功后跳转到 home 页面，只要 home 页面一挂载就去请求接口获取用户数据。
<!-- src/views/home/index.vue -->
<script setup lang="ts">
  import { onMounted } from "vue";
  // 引入仓库
  import useUserStore from "@/store/modules/user";
  // 首页加载完毕获取用户数据
  onMounted(() => {
    useUserStore.userInfo();
  });
</script>

定义获取用户信息的方法

  • 修改 state 的 ts 类型
// src/store/modules/types/type.ts
import type { RouteRecordRaw } from 'vue-router';
export default UserState {
    token: string | null;
    menuRoutes: RouteRecordRaw[],
    username: stirng,
    avatar: string
}
  • src/store/modules/user.ts
//...
let useUserStore = defineStore("User", {
  //...
  state: (): UserState => {
    return {
      //...
      username: "",
      avatar: "",
    };
  },
  //...
  actions: {
    //...
    // 获取用户信息
    async userInfo() {
      const result = await reqUserInfo();
      if (result.code === 200) {
        this.username = result.data.checkUser.username;
        this.avatar = result.data.checkUser.avatar;
      }
    },
  },
});
//...
export default useUserStore;
  • 登录成功获取到 token 之后，给其他请求添加 token
// src/utils/request.ts
//...
import useUserStore from "@/store/modules/user";
//...
request.interceptors.request.use((config) => {
  let userStore = useUserStore();
  if (userStore?.token) {
    config.headers.token = userStore?.token;
  }
  return config;
});
//...

- Book Lists -