保存后的Vue加载页面以存储令牌身份验证

Question

我创建文件 JS 从数据库中获取令牌并将其保存在会话存储中，然后将此文件导入到 Vue 中的 app.js：

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 构造函数开始请求获取令牌
• auth.js 将令牌从存储（首次加载时丢失）分配给默认值
• somecomponent.vue 使用丢失的令牌（会话为空）进行 api 调用
• auth.js 完成 getToken 并将新令牌分配给默认标头
• somecomponent.vue 的 api 调用失败，因为 API 调用没有令牌

现在当您刷新页面时...

• auth.js 构造函数开始请求获取令牌
• auth.js 从存储中分配令牌
• somecomponent.vue 使用会话存储中的令牌进行 api 调用
• auth.js 完成getToken并更新session中的token
• somecomponent.vue 的 api 调用成功，因为该 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 存储中保存状态信息，因此任何其他函数都可以检查当前是否正在拉取令牌，因此不会同时发出其他请求，但这仍然需要一些逻辑来使请求在之后发生。