VueJS set axios header сохраняются

Question

У меня была проблема, которая длится только в моем состоянии vuex для обновления веб-страницы.После обновления веб-страницы данные в хранилище vuex исчезают.

Для преодоления этого я использовал красивый плагин под названием Vuex persistestate Теперь мой vuex сохраняется.

Но все же у меня проблема с заголовком авторизации axios.Я установил заголовок аутентификации в действии входа в систему axios следующим образом

actions: {
    login({ commit }, payload) {
      return new Promise((resolve, reject) => {
        try {
          axios.defaults.headers.common.Authorization = payload.token;
          commit('setUser', payload);
          resolve();
        } catch (error) {
          reject();
        }
      });
    },
  },

Но это значение заголовка аутентификации стало неопределенным, если я нажму кнопку обновления.Как мне преодолеть эту проблему?

Answer 1

Это потому, что в последнем сеансе вы вызывали login, и он сохраняет токен в вашем экземпляре axios.При обновлении настройка заголовков исчезла.Сохраненное состояние Vuex только сохраняет ваш Vuex, а ваш токен отсутствует в вашем Vuex.

Я использую js-cookie здесь.

// login action
   ...
   axios.defaults.headers.common.Authorization = payload.token;
   Cookies.set('token, payload.token);
   commit('setUser', payload);
   resolve();
   ...

// Put it somewhere in the entry of your application, e.g: `main.js`, `App.vue`.
axios.defaults.headers.common.Authorization = Cookies.get(token);