Estoy tratando de redirigir a la página de inicio después de iniciar sesión, pero antes quiero actualizar el token JWT en el encabezado.

iniciar sesión.tsx

 ... const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const data = new FormData(event.currentTarget); axiosInstance .post('token/', { username: data.get('username'), password: data.get('password'), }) .then((res) => { localStorage.setItem('access_token', res.data.access) localStorage.setItem('refresh_token', res.data.refresh) axiosInstance.defaults.headers.common['Authorization'] = 'JWT ' + localStorage.getItem('access_token') navigate('/', { replace: true }) }) } ...

En la página de inicio, apenas ingresa, hace una solicitud POST (usando el encabezado establecido en Axios)

casa.tsx

 ... const updateData = () => { return axiosInstance.post(`words/update/`, { 'timezone': Intl.DateTimeFormat().resolvedOptions().timeZone }) } useEffect(() => { updateData() }, []) ...

El problema aquí es que la solicitud POST envía el encabezado con el antiguo token JTW (no el actualizado). Solo después de actualizar la página, usa el encabezado actualizado.

Por cierto, tal vez esta información sea relevante. Así es como se ve mi App.tsx:

Aplicación.tsx

 import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import AddWord from "./components/addWord"; import './App.css'; import Home from "./components/home"; import SignIn from "./components/signIn"; import SignUp from "./components/signUp"; function App() { return ( <div className="container"> <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/add_word" element={<AddWord />} /> <Route path="/login" element={<SignIn />} /> <Route path="/register" element={<SignUp />} /> </Routes> </Router> </div> ); } export default App;