保存后，VUE加载页面存储了令牌验证

Question

i创建文件js以获取数据，并将其保存在session sotorage中，下一个将此文件导入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看不到令牌(。我必须刷新页面，现在我可以从Databse获取数据。

我如何在没有刷新页面的情况下获得约会？

Answer 1

我相信，问题是您在其他地方提出请求时获取令牌。

这是我认为发生的事件的顺序。

• auth.js contstructor启动请求获取令牌
• auth.js从存储中分配令牌(第一次加载丢失(到默认值
• someComponent.vue使用丢失的令牌(sempty(
进行API调用
• auth.js完成getToken，并将新令牌分配给默认标题
• someComponent.Vue的API调用失败，因为API调用没有令牌

现在刷新页面...

• auth.js contstructor启动请求获取令牌
• auth.js从存储中分配令牌
• someComponent.vue使用"会话存储中的令牌"进行API调用
• auth.js完成getToken并在会话中更新令牌
• someComponent.vue的API调用成功，因为API调用在获得新功能之前使用了正确的令牌

如果是这种情况，您需要做的就是将任何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商店中保留状态信息，因此任何其他功能都可以检查当前是否正在撤消令牌，因此没有同时提出其他请求，但这仍然需要一些逻辑才能使请求在此之后发生。