检索JWT令牌后，请求失败

Question

我使用Django的智威汤逊与DRF和Vue公司的js与爱可信。当我在用户登录检索和存储在其中，我已经验证工作本地存储的令牌。然后我重定向到一个新的页面，在这里我再拍请求来获取数据。每次我重定向到这个页面，我得到一个401没有授权，当我刷新页面，它工作正常。我检查，以确保令牌使这是第二个请求之前存储。我试图得到重定向的页面上创建挂钩的数据。我还创建一个实例Axios公司要处理的标题和使用基本路线，然后导入到其中所需要的文件，我不知道是否有什么用它做。当令牌已过期，您尝试检索一个新的，这也只是发生。我应该是刷新令牌，而不是试图获得一个新的？

Axios instance

import axios from 'axios'

export default axios.create({
  baseURL: `http://127.0.0.1:8000/`,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'JWT ' + localStorage.getItem('token')
  },
  xsrfCookieName: 'csrftoken',
  xsrfHeaderName: 'X-CSRFToken',
  withCredentials: true
})

Edit

api.js

import axios from 'axios'

export default axios.create({
  baseURL: `http://127.0.0.1:8000/`,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'JWT ' + localStorage.getItem('token')
  },
  xsrfCookieName: 'csrftoken',
  xsrfHeaderName: 'X-CSRFToken',
  withCredentials: true
})

AppLogin.vue

确认通过点击登录按钮触发

 confirm: function() {
       API.post("accounts/login/", {
        email: this.email,
        password: this.password,
       })
        .then(result => {
          console.log(result.data.token);
          this.token = result.data.token;
          localStorage.setItem("token", this.token);
          this.getUserInfo()
        })
        .catch(error => {
          console.log(error);
        });

    },
    getUserInfo: function(){
      axios.get("http://127.0.0.1:8000/userinfo/get/", {
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'JWT ' + this.token
        }
      })
        .then(response => {
          console.log(response.data.pos);
          var pos = response.data.pos;
          this.reroute(pos);
        })
        .catch(error => {
          console.log(error);
        });
    },
    reroute(pos) {
      if (pos == "owner") {
        this.$router.push({ path: "/bizhome" });
      } else {
        this.$router.push({ path: "/" });
      }
    }

BizHome.vue

这是登录重定向到成功页面

created: function() {
    this.getLocations();
  },
  methods: {
    getLocations() {
      API.get("business/")
        .then(response => {
          this.biz = response.data;
        })
        .catch(error => {
          console.log(error);
        });

      API.get("locations/")
        .then(response => {
          this.bizLocations = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
  }

solution

使用一些建议，我已经从下面诱惑得到了，我直接添加的报文头中的getLocations方法的get调用覆盖爱可信实例头。看来，加载新的页面令牌在实例更新之前。一个缺点是该解决方案是，虽然我现在有直接的头添加到我做的所有呼叫。在实例中的头再也没有更新。我没有API.defaults.headers.common['Authorization'] = 'JWT ' + result.data.token;添加到其应更新实例的令牌，令牌的检索成功的确认方法。这并没有为我工作，如果任何人有任何想法，我会有兴趣听他们

edit 2

我也明白，为什么爱可信实例没有更新它，因为我想从本地stroage令牌在api.js和它覆盖它。现在，它的工作原理，但令牌不具有持续性，所以这是不理想的为好。如果我找到一个更好的解决方案，我会更新。

Final Update

我终于找到了一个很好的解决方案。我删除从api.js的爱可信实例的授权头，然后我删除了所有来自所有Axios公司电话头。在成功登录后的确认方法我加提到前面提到API.defaults.headers.common['Authorization'] = 'JWT ' + result.data.token;这条线，也加入令牌到本地存储。我有一个验证运行网页加载之前令牌的方法。在该方法之前，我做了POST请求，以验证我加API.defaults.headers.common['Authorization'] = 'JWT ' + localstorage.getItem('token');令牌。这允许用户浏览跳投现场回来，仍然有效，如果使用令牌，并不需要的头要在每次调用设置。

Answer 1

这是为什么发生的原因是因为爱可信实例已经与存在于localStorage的过期令牌创建的。所以，你必须确保在爱可信实例与登录后的令牌的新鲜得到更新，否则你最终会使用旧的令牌，直到一个新的页面重新加载。尝试以下方法：

import axios from 'axios'

export default axios.create({
  baseURL: `http://127.0.0.1:8000/`,
  headers: {
    'Content-Type': 'application/json',
    Authorization() { // Converted to a method, similar concept to a vue data property
      return `JWT  ${localStorage.getItem('token')}`,
    }
  },
  xsrfCookieName: 'csrftoken',
  xsrfHeaderName: 'X-CSRFToken',
  withCredentials: true
})

或者，你甚至可以用爱可信拦截器以及从localStorage的每个请求获取：

// Add a request interceptor
axios.interceptors.request.use(config => {
    // Do something before request is sent
    config.headers = {
      'Content-Type': 'application/json',
      Authorization: 'JWT ' + localStorage.getItem('token')
    }
    return config
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });