javascript - Django-React Axios 请求破坏令牌

Question

每次我在 ComponentDidMount() 中执行 axios 请求时，例如：

axiosInstance.get('/user/profile', {
  headers: {
    "Authorization": "JWT " + localstorage.getItem('access_token')
  }
}).then(res => {
  return res;
}).catch(err => {
  console.log(err)
})

或这个

axiosInstance.get('/user/profile').then(res => {
  axiosInstance.defaults.headers["Authorization"] = "JWT " + localstorage.getItem('access_token');
  return res;
}).catch(err => {
    console.log(err)
})

我正在运行一个以 postgresql 作为我的数据库的 Django-React 项目。我按照 Toruitas 在 Hackernoon 上的指南介绍了如何使用 simple-JWT 来发布我的 access_token 和 refresh_token。每次运行 axios 请求时，我的 refresh_token 都会变得未定义，并且由于我的 refresh_token 丢失，它只会使我的所有其他请求无用

我的 axiosAPI - axiosInstance ：

import axios from "axios"
import jwt from "jwt-decode"
import history from "./utilities/history"

const baseURL = 'http://127.0.0.1:8000/api/'

const axiosInstance = axios.create({
  baseURL: baseURL,
  timeout: '5000',
  headers: {
    'Authorization': localStorage.getItem('access_token') ? "JWT " + localStorage.getItem('access_token') : null,
    'Content-Type': "application/json",
    'accept': "application/json"
  }
});

axiosInstance.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;

    // if (error.response.status === 401 && originalRequest.url === baseURL +'token/refresh/') {
    //     history.push('/login')
    //     return Promise.reject(error);
    // }

    if (error.response.data.code === "token_not_valid" &&
      error.response.status === 401 &&
      error.response.statusText === "Unauthorized") {
      const refreshToken = localStorage.getItem('refresh_token');

      if (refreshToken) {
        // const tokenParts = JSON.parse(atob(refreshToken.split('.')[1]));
        const tokenParts = jwt(refreshToken, {
          completed: true
        })

        //exp date in token is expressed in second, while now() returns milliseconds:
        const now = Math.ceil(Date.now() / 1000);
        // console.log(tokenParts.exp)     



        if (tokenParts.exp > now) {
          return axiosInstance
            .post('/token/refresh/', {
              refresh: refreshToken
            })
            .then((response) => {


              localStorage.setItem('access_token', response.data.access);
              localStorage.setItem('refresh_token', response.data.refresh);

              axiosInstance.defaults.headers['Authorizations'] = "JWT " + response.data.access;
              originalRequest.headers['Authorization'] = "JWT " + response.data.access;

              return axiosInstance(originalRequest);
            })
            .catch(err => {
              console.log(err)
            });
        } else {
          console.log("Refresh token is expired", tokenParts.exp, now);
          history.push('/login')
        }
      } else {
        console.log("Refresh token not available")
        history.push('/login')
      }
    }

    return Promise.reject(error);
  }
);

export default axiosInstance;

我正在使用的代码示例：

checkAuthentication 是检查本地存储中存在且未过期的有效 access_token

verifyAdminStatus 是检查 jwt 令牌 customInput 角色 == 管理员以授予用户访问其合法页面的权限

你能告诉我或者至少告诉我哪里出错了吗

标签： javascriptreactjsdjangoaxios