检索JWT令牌后请求失败

Question

我将Django JWT与DRF一起使用，将Vue Js与Axios一起使用。当用户登录时，我检索并将令牌存储在本地存储器中，我已验证该令牌可以正常工作。然后我重定向到一个新页面，在那里我提出另一个请求以获取数据。每次我重定向到这个页面，我得到一个401未授权，当我刷新页面，它工作良好。在发出第二个请求之前，我检查了是否存储了令牌。我尝试在创建的钩子中获取重定向页面上的数据。我还创建了一个axios实例来处理头并使用一个基本路由，然后在需要的地方将它导入到文件中，我不确定这是否与此有关。这也只有当令牌过期并且您尝试检索新的时才会发生。我是否应该刷新令牌而不是尝试获取新的令牌？

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
})

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
})

 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: "/" });
      }
    }

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);
        });
    },
  }

使用下面YuuwakU提供的一些建议，我将头直接添加到getLocations方法中的get调用中，以覆盖axios实例头。新页面似乎是在实例中更新令牌之前加载的。但是，这个解决方案的一个缺点是，我现在必须直接将头添加到我所做的所有调用中。实例中的头永远不更新。在成功检索到本应更新实例的令牌的令牌时，我确实向confirm方法添加了api.defaults.headers.common['authorization']='jwt'+result.data.token；。这对我不起作用，如果有人有什么想法，我会很有兴趣听听

我确实弄清楚了为什么axios实例没有更新它，是因为我试图从api.js中的本地stroage获取令牌，并且它正在重写它。现在它工作了，但是令牌不是持久的，所以这也不是理想的。我会更新，如果我找到更好的解决方案。

我终于想出了一个好办法。我从api.js中的axios实例中删除了授权头，然后从所有axios调用中删除了所有头。在成功登录时的confirm方法中，我添加了前面提到的这一行api.defaults.headers.common['authorization']='jwt'+result.data.token；，并将令牌添加到本地存储中。我有一个在加载页面之前运行验证令牌方法。在该方法中，在发出验证令牌的post请求之前，我添加了api.defaults.headers.common['authorization']='jwt'+localstorage.getitem('token')；。这使得用户可以在站点中浏览一遍，然后返回时仍然使用令牌（如果有效的话），并且不需要在每次调用时设置头。

Answer 1

之所以会发生这种情况，是因为已经创建了一个axios实例，该实例带有一个存在于LocalStorage中的过期令牌。因此，您必须确保在登录后使用令牌的新get更新axios实例，否则将使用旧令牌直到重新加载新的页面。请尝试以下操作：

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
})

或者，您甚至可以使用axios拦截器从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);
  });