如何存储身份验证令牌以在 Nuxt 3 中进行 API 调用

Question

我是 Nuxt 的新手。通常，使用 Vue.js，我会在登录后从 API 获取访问令牌，并将其保存到 pinia 存储和 localStorage。如果用户刷新页面，我将从 localStorage 获取它并在 pinia 商店中再次设置它。

但我不知道在 Nuxt 做什么。这是我的第一个 SSR 应用程序。 我有一个 pinia 商店来保存访问令牌，但如果我刷新页面，它就会被删除。

如何使用 Nuxt 处理这种情况？

Answer 1

在 store/user.js 中创建文件

// user.js

import { createGlobalState, useStorage } from '@vueuse/core'

export const useUserState = createGlobalState(
  () => useStorage('user', {
    token:'',
    role: '',
    details:{},
  }),
)

//登录.vue

<script setup lang="ts">
import { useUserState } from "~/stores/user";

const userState = useUserState()
async function login(event: FormSubmitEvent<any>) {
  try {
    //manage payload
    const payload = Object.assign({}, event.data);

    // implement login api
    let resp = await UserApi.UserLogin(payload);
    if (resp.status === 200) {
      const { token, data } = resp.data;

      // update staorage
      userState.value.token = token;
      userState.value.details = data;
      userState.value.role = data.role;
    } 
  } catch (e: any) {
    //manage error
  } 
}
</script>