访问令牌过期后的未授权请求

Question

axios.js

import axios from "axios";

let refresh = false;

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')?localStorage.getItem('access_token'):null}`

axios.interceptors.response.use(resp => resp, async error => {
  if (error.response.status === 401 && !refresh) {
     refresh = true;
     const response = await
           axios.post('http://127.0.0.1:8000/token/refresh/', 
                      {refresh:localStorage.getItem('refresh_token')},
                      {headers: {'Content-Type': 'application/json'}},
                      {withCredentials: true}
                      );

      let access_token = response.data.access;
      axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
      console.log(axios.defaults.headers.common['Authorization']);
      localStorage.setItem('access_token', response.data.access);
      localStorage.setItem('refresh_token', response.data.refresh);
      return axios(error.config);
  }
refresh = false;
return error;
});

登录.js

import axios from "axios";
import { useState } from "react";
// Define the Login function.
export const Login = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [invalid, setInvalid] = useState(false);
// Create the submit method.
const submit = async (e) => {

  e.preventDefault();
  const user = {
  username: username,
  password: password,
  };
  // Create the POST requuest
  try {
    const { data } = await axios.post("http://127.0.0.1:8000/token/", user,
    {headers: {'Content-Type': 'application/json'}},
                  {withCredentials: true});

    // Initialize the access & refresh token in localstorage.
    localStorage.clear();
    localStorage.setItem("access_token", data.access);
    localStorage.setItem("refresh_token", data.refresh);
    let access_token = localStorage.getItem('access_token');
    axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
    window.location.href = "/";
  } catch (e) {
      setInvalid(true);
    }
};


  return (
    <div className="Auth-form-container">
      <form className="Auth-form" onSubmit={submit}>
        <div className="Auth-form-content">
          <h3 className="Auth-form-title">Sign In</h3>
          <div className="form-group mt-3">
            <label>Username</label>
            <input
              className="form-control mt-1"
              placeholder="Enter Username"
              name="username"
              type="text"
              value={username}
              required
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>
          <div className="form-group mt-3">
            <label>Password</label>
            <input
              name="password"
              type="password"
              className="form-control mt-1"
              placeholder="Enter password"
              value={password}
              required
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <div className="d-grid gap-2 mt-3">
            <button type="submit" className="btn btn-primary">
            Submit
            </button>
          </div>
        </div>
      </form>
      {invalid && "Invalid Credentials!!!"}
    </div>
  );
};

Home.js

import {useEffect, useState} from "react";
import axios from "axios";
import jwt_decode from 'jwt-decode';
// Define the Login function.
export const Home = () => {
     const [message, setMessage] = useState('');
     const [user, setUser] = useState();

     useEffect(() => {
        if(localStorage.getItem('access_token') === null){                   
            window.location.href = '/login'
        }
        else{
         (async () => {
           try {
             let access_token = localStorage.getItem('access_token');
             let user_id = jwt_decode(access_token).user_id;
             const {data} = await axios.get(   
                            `http://127.0.0.1:8000/home/`,
                            {headers: 
                              {'Content-Type': 'application/json',
                              }}
                            );
             setMessage(data.message);
          } catch (e) {
          }
         })()};
     }, []);

     
     return (
        <div className="form-signin mt-5 text-center">
          <h3>Hi {message}</h3>
        </div>
     );
}

我已经在 index.js 中导入了拦截器。我遇到了一个问题，当访问令牌过期时，我在向 /token/refresh/ 发送发布请求时获得状态 401。在获得对 127.0.0.1:8000/home/ 的未授权访问后，当我再次刷新页面时，它就被授权了。