如何在React中实现JTW的刷新？

import jwt from 'jsonwebtoken';
import axios from 'axios';

const refreshToken = async () => {
  try {
    // 发送请求到服务器以获取新的JWT令牌
    const response = await axios.post('/refresh-token');
    
    // 从响应中获取新的JWT令牌
    const { token } = response.data;
    
    // 将新的JWT令牌存储到本地存储或其他安全的方式中
    localStorage.setItem('jwtToken', token);
    
    // 返回新的JWT令牌
    return token;
  } catch (error) {
    console.error('Failed to refresh JWT token:', error);
  }
};

const getAccessToken = () => {
  try {
    // 从本地存储或其他安全的方式中获取JWT令牌
    const token = localStorage.getItem('jwtToken');
    
    // 解析JWT令牌
    const decodedToken = jwt.decode(token);
    
    // 检查JWT令牌是否过期
    const isTokenExpired = Date.now() >= decodedToken.exp * 1000;
    
    if (isTokenExpired) {
      // JWT令牌已过期，调用refreshToken函数来获取新的JWT令牌
      const newToken = refreshToken();
      
      // 返回新的JWT令牌
      return newToken;
    }
    
    // 返回当前有效的JWT令牌
    return token;
  } catch (error) {
    console.error('Failed to get JWT token:', error);
  }
};

import React, { useEffect } from 'react';
import axios from 'axios';

const ProtectedComponent = () => {
  useEffect(() => {
    const fetchData = async () => {
      // 获取JWT令牌
      const token = getAccessToken();
      
      // 发送受保护的请求并将JWT令牌添加到请求头中
      const response = await axios.get('/protected-endpoint', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      
      // 处理响应数据
      console.log(response.data);
    };
    
    fetchData();
  }, []);
  
  return <div>Protected Content</div>;
};

export default ProtectedComponent;