ReactJS -如何从Node js API获取经过认证的用户数据？

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

const UserComponent = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const token = localStorage.getItem('token'); // 从存储中获取令牌
        const response = await axios.get('/api/user', {
          headers: {
            Authorization: `Bearer ${token}`, // 将令牌添加到请求标头中
          },
        });
        setUserData(response.data); // 设置用户数据状态
      } catch (error) {
        console.error(error);
      }
    };

    fetchUserData();
  }, []);

  return (
    <div>
      {userData ? (
        <div>
          <h2>{userData.name}</h2>
          <p>{userData.email}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserComponent;

const express = require('express');
const app = express();

// 身份验证中间件
const authenticate = (req, res, next) => {
  // 从请求标头中获取令牌
  const token = req.headers.authorization.split(' ')[1];

  // 在此处验证令牌的有效性
  // ...

  // 令牌验证成功，继续处理请求
  next();
};

// 受保护的端点
app.get('/api/user', authenticate, (req, res) => {
  // 从数据库或其他数据源中检索用户数据
  const userData = {
    name: 'John Doe',
    email: 'john@example.com',
  };

  res.json(userData);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});