Vue загрузить страницу после сохранения для сохранения токена

Question

Я создаю файл JS, чтобы получить токен из базы данных и сохранить его в хранилище сессии, затем импортирую этот файл в app.js в Vue:

import Auth from './auth/auth';

new Vue({
    el: "#app_resource",
    router,
    store,
    beforeMount() {
      window.auth = new Auth();
    },
    render: h => h(App)
});

файл auth.js

import axios from 'axios';

class Auth  {
  constructor() {
    this.getToken();
    let token = window.sessionStorage.getItem('token');
    if (token) {
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    }  
  }

  getToken(){
    let options = {
      method: "post",
      url: "/getapitoken",
      headers: {
          'Accept': 'application/json'
      }
    };
    axios(options)
    .then(response => {
      let token = response.data.token
      if (token) {
        this.issetToken(token);
      }
    })
    .catch(({ response }) => {
      console.warn(response); 
    });
  }

  issetToken(token){
    if (window.sessionStorage.getItem('token') === null) {
      window.sessionStorage.setItem('token', token);
    } else {
      window.sessionStorage.removeItem('token');
      window.sessionStorage.setItem('token', token);
    }
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
  }

}

export default Auth;

Токен в хранилище сеансов сохранен правильно, но у меня возникла проблема, потому что у меня есть перенаправление на стартовую страницу после входа в систему, на стартовую страницу поступают данные из базы данных, и мне нужен токен для получения этих данных. Но Vue возвращает ошибку 401 (не авторизовано) (например, Vue не может видеть токен). Я должен обновить страницу, и теперь я могу получать данные из базы данных.

Как я могу получить дату без обновления страницы после входа в систему?

Answer 1

Я считаю, что проблема в том, что вы получаете токен, когда делаете запрос в другом месте.

Вот последовательность событий, поскольку я верю, что это происходит.

• auth.js contstructor запускает запрос на получение токена
• auth.js назначает токен из хранилища (отсутствует при первой загрузке) по умолчанию
• somecomponent.vue выполняет вызов API с использованием отсутствующего токена (сеанс пуст)
• auth.js завершает getToken и назначает новый токен заголовкам по умолчанию
• вызов api somecomponent.vue завершается неудачно, поскольку вызов API не имеет токена

Теперь, когда вы обновите страницу ...

• auth.js contstructor запускает запрос на получение токена
• auth.js назначает токен из хранилища
• somecomponent.vue выполняет вызов API с использованием токена из хранилища сеансов
• auth.js завершает getToken и обновляет токен в сеансе
• вызов api somecomponent.vue выполняется успешно, поскольку вызов API использовал правильный токен до того, как функция getToken получила новый

Если это так, все, что вам нужно сделать, это отложить любые действия API, пока вы не получите токен. Конечно, это может быть не так просто, потому что вам нужно знать, установлен ли токен, и связывать запросы или каким-то образом.

Вы можете попробовать удерживать перенаправление, пока ваш getToken не преуспеет (хотя я не знаю, как вы справляетесь с этим), заставив функцию возвращать обещание

  getToken(){
    let options = {
      method: "post",
      url: "/getapitoken",
      headers: {
        'Accept': 'application/json'
      }
    };
    return axios(options)
    .then(response => {
      let token = response.data.token
      if (token) {
        this.issetToken(token);
        return token;
      }
    })
    .catch(({ response }) => {
      console.warn(response); 
    });
  }

и тогда вы сможете использовать что-то вроде window.auth.getToken().then(()=>doMyRedirect())

В прошлом я справлялся с этими ситуациями с помощью Vuex, и в хранилище Vuex хранится информация о состоянии, поэтому любая другая функция может проверять, извлекается ли токен в данный момент, поэтому другие запросы не выполняются одновременно. , но это все еще требует некоторой логики для выполнения запросов после.