localStorage 中的 Nuxt 3 授权令牌答案

【问题标题】：Nuxt 3 auth token in localStoragelocalStorage 中的 Nuxt 3 授权令牌
【发布时间】：2022-12-15 05:23:35
【问题描述】：

我尝试在我的应用程序中创建登录名。我有登录响应，它返回 access_token 并将其添加到 localStorage 中。我在 pinia 中的代码

import { defineStore } from 'pinia'
import { axiosInstance } from '@/axios.config'


export const useAuth = defineStore('auth',{
    state: ()=>({
        user:[],
        access_token:[],
    }),

    actions:{
        async loginUser(email:string, password:string){
            try{
                const res = await axiosInstance.post('/login',{email, password,  withCredentials: true,})
                this.user = await res.data.user
                this.access_token = await res.data.access_token
                localStorage.setItem("access_token", res.data.access_token)
               await useRouter().push('/')
              
             }catch(e){
            console.log(e.response.data)
        }
    },

和 axios 配置：

import axios from 'axios'

const API_URL = 'https://quiz.bojarm.pl/api';

export const axiosInstance = axios.create({
    baseURL: API_URL,
    headers: {
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers':  'Content-Type, X-Auth-Token, Authorization, Origin',
        Accept: "application/json",
        Authorization: `Bearer ${localStorage.getItem('access_token')}`,
    },
})

当我尝试登录令牌时效果很好，但是当我重新加载页面时，access_token 不起作用并注销用户

【问题讨论】：

标签： javascript vue.js nuxt.js nuxtjs3 pinia

【解决方案1】：

公理和@nuxtjs/axios不建议与 Nuxt 3 一起使用

利用使用获取()- 它应该可以解决您的问题。

在这里阅读： https://nuxt.com/docs/getting-started/data-fetching/#usefetch

【讨论】：