Как установить 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