Как установить headers в axios в Vue?

В проекте использую Vue3 composition + typescript + Pinia

есть файл с логикой авторизации

import axios from "axios";
import api from "../services/api";
import { useAuthStore } from "../store/auth";

export default function () {
  const authStore = useAuthStore();

  async function login(credentials: object) {
    const response = await axios.post(
      "http://site.ru/api/v1/auth/login",
      credentials
    );
    setAuthToken(response.data.access_token);
    getAuthUser(response.data.access_token);
  }

  function setAuthToken(token: string): void {
    authStore.setToken(token);
  }

  async function getAuthUser(token: string) {
    try {
      let response = await axios.post(
        "http://site.ru/api/v1/auth/me",{}
      );

      authStore.setUser(response.data);
    } catch (e) {
      console.log(e)
      //clearAuth();
    }
  }

  function clearAuth(): void {
    authStore.setUser(null);
    authStore.setToken(null);
  }

  return { login };
}

есть файл interceptor

import axios from "axios";
import TokenService from "./token.service";
import useAuth from "../composables/useAuth";

const setup = () => {
  const ax = axios.create();
  ax.interceptors.request.use(
    (config) => {
      const token = TokenService.getLocalAccessToken();
      if (token) {
        config.headers["Authorization"] = 'Bearer ' + token; // for Spring Boot back-end
      } else {
        config.headers["Authorization"] = null
      }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  )

  ax.interceptors.response.use(
    (res) => {
      return res;
    },
    async (err) => {
      const originalConfig = err.config;

      console.log(err)

      if (originalConfig.url !== "/api/v1/auth/login" && err.response) {
        // Access Token was expired
        if (err.response.status === 401 && !originalConfig._retry) {
          originalConfig._retry = true;

          try {
            const rs = await axiosInstance.post("/api/v1/auth/refresh", {
              refreshToken: TokenService.getLocalRefreshToken(),
            });

            const {
              accessToken
            } = rs.data;

            TokenService.updateLocalAccessToken(accessToken);

            return axiosInstance(originalConfig);
          } catch (_error) {
            return Promise.reject(_error);
          }
        }
      }

      return Promise.reject(err);
    }
  );
};
export default setup;

хранилище

import { defineStore } from "pinia";

export const useAuthStore = defineStore({
  id: "auth",
  state: () => ({
    user: null,
    loggedIn: false,
    token: null,
  }),
  getters: {
    getUser(state: any) {
      return state.user;
    },
  },
  actions: {
    setToken(token: string) {
      this.token = token;
      localStorage.setItem('auth._token', token);
    },

    setUser(user: object) {
      this.user = user;
    },
  },
});

TokenService

class TokenService {
  getLocalRefreshToken() {
    const refreshToken = localStorage.getItem("auth._token");
    return refreshToken;
  }

  getLocalAccessToken() {
    const token = localStorage.getItem("auth._token");
    console.log(token)
    return token;
  }

  updateLocalAccessToken(token) {
    localStorage.setItem("auth._token", JSON.token);
  }
}

export default new TokenService();

в файле main.ts

import { createPinia } from "pinia";
import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";
const app = createApp(App);

app.use(router).use(createPinia());
import "../src/assets/css/main.scss";

import setupInterceptors from "./services/setupInterceptors";

setupInterceptors();

app.mount("#app");

Но после авторизации токен не записывается в headers axios


Ответы (0 шт):