Блог

В моем проекте используются vuex, axios, vue-cookies и JWT. У меня есть файл с именем api.js который импортируется в мой основной vue js, api.js код ниже;

 import axios from 'axios'
import Vue from 'vue'
import { store } from "@/store";

export default axios.create({
    baseURL: store.state.endpoints.baseUrl,
    headers: {
        Authorization: `JWT ${Vue.$cookies.get('token')}`,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
  

Когда я вхожу в систему через свою страницу входа, все кажется успешным. В инспекторе значение cookie ‘token’ корректно обновляется с помощью нового токена, обновления Vuex показывают, что пользователь аутентифицирован, и маршрутизатор перенаправляет меня на домашнюю страницу.
Однажды на домашней странице, если я пытаюсь перейти на страницу, которая выполняет какой-либо вызов, требующий аутентификации, в заголовке он передает ‘JWT null’ вместо токена в файле cookie и завершается неудачей, и я оказываюсь в бесконечном цикле успешного входа в систему, но не могу никуда перейти.

Если я войду в систему, а затем обновлю страницу, прежде чем делать что-либо еще, все будет работать так, как ожидалось, и JWT больше не будет нулевым. Похоже, что api.js код в верхней части этого вопроса неправильно извлекает токен из файла cookie каждый раз, когда он вызывается, но только при обновлении страницы, он кэшируется или мне нужно каким-то образом перезагрузить этот импорт после входа в систему?

Для справки, фрагмент кода с моей страницы входа в систему, чтобы показать, как данные обновляются после входа в систему;

   api.post(this.$store.state.endpoints.obtainJWT, payload)
      .then((response) => {
        console.log("Token - " response.data.token);
        console.log("Profile - " response.data.user);
        this.$cookies.set('token', response.data.token);
        this.$store.commit("setAuthUser",
            {authUser: response.data, isAuthenticated: true})
      })
      .then(() => this.$router.push({path: '/'}))
      .catch((error) => {
        console.log("Error!");
        console.log(error);
        console.debug(error);
        console.dir(error);
      })
  

и пример вызова api, который содержит ‘JWT null’, если к нему обращаются перед обновлением страницы;

 import api from "../api.js";
...
api.get("/data_full/"   id)
  .then((response) => {
    this.title = response.data.title;
  })
  

и в моих проектах main.js , в api.js импорт;

 ...
import api from './api.js'
...
Vue.$http = api;
  

Прочитав мой вопрос после публикации, я понял, что проблема заключается не в вызове get (‘token’), а в том, что я создаю экземпляр Axios, который явно не воссоздается после сохранения токена в cookie.

Теперь я переместил код, относящийся к заголовку авторизации, из api.js и в main.js в качестве перехватчика. Таким образом, значение токена в cookie извлекается каждый раз, когда выполняется вызов Axios. Это решило мои проблемы. Обновленный код в main.js ниже;

     ...
    api.interceptors.response.use(
        config => {
            const token = Vue.$cookies.get('token');
            if ( token != null ) {
                config.headers.Authorization = `JWT ${token}`;
            }
            return config
        },
    ...