15、React 用户认证与 FastAPI 后端构建实战

React 用户认证与 FastAPI 后端构建实战

1. React 中的用户认证

在 React 应用里，实现用户认证是保障系统安全和用户体验的重要环节。以下是一段展示用户列表并提供注销功能的代码：

<div className='flex flex-col'>
    <h1>The list of users</h1>
    <ol>
        {users.map((user) => (
            <li className='' key={user.id}>{user.username}</li>
        ))}
    </ol>
    <button onClick={logout} className='bg-blue-500 text-white rounded'>Logout</button>
</div>
) : (
    <p>{error}</p>
)}
</div>
);
};
export default Users;

此应用能够持久保存已登录用户信息，获取存储的 JWT（JSON Web Token），并恢复之前的认证状态。在尝试登录前，要确保 FastAPI 后端在端口 8000 正常运行。你可以进行登录、刷新浏览器、关闭并重新打开标签页等操作来测试。还能在 Chrome 或 Firefox 开发者工具的“Application”标签中对令牌进行篡改或删除，观察应用的反应。 </