如何正确创建一个已登录用户的JSON响应给React

在访问一个需要登录才能访问的 React 页面时，后端需传递一个已登录用户的 JSON Response 给前端。以下是一个简单的示例代码，可以让你了解如何正确创建一个 JSON 响应：

# Python 的 Flask 示例代码
from flask import jsonify, session

@app.route('/profile')
def profile():
    if 'user_id' in session: # 检查用户是否已登录
        user_id = session['user_id']
        user = User.query.get(user_id)
        return jsonify({
            'id': user.id,
            'username': user.username,
            'email': user.email,
            'profile_pic': user.profile_pic_url,
            'bio': user.bio
        })
    else:
        return jsonify({'error': '请先登录'})

# 这个路由可以返回类似以下 JSON 响应：
{
  "id": 123,
  "username": "johndoe",
  "email": "johndoe@example.com",
  "profile_pic": "https://example.com/profile.jpg",
  "bio": "一个程序员"
}

对于前端 React，可以利用 fetch 来获取该 JSON 响应：

// 前端 React 示例代码
import { useState, useEffect } from 'react';

function Profile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/profile');
      const data = await response.json();
      setUser(data);
    }
    fetchData();
  }, []);

  if (user) {
    return (
      <div>
        <h1>Welcome, {user.username}</h1>
        <p>{user.email}</p>
        <img src={user.profile_pic} alt="" />
        <p>{user.bio}</p>
      </div>
    );
  } else {
    return <p>请等待...</p>;
  }
}