25、与 RESTful API 交互及自动化测试实现

与 RESTful API 交互及自动化测试实现

控制认证选项

在当前应用中，无论用户是否认证，所有选项都可见。但某些选项只有在用户登录后才能正常工作，比如未登录时提交问题会失败。接下来将解决这个问题。

显示头部相关选项

在 Header.tsx 中按以下步骤清理显示逻辑：
1. 导入认证上下文 Hook：

import { useAuth } from './Auth';

2. 连接到认证上下文并在返回 JSX 前返回用户对象、用户是否认证以及上下文是否加载：

export const Header = () => {
  ...
  const { isAuthenticated, user, loading } = useAuth();
  return (
    ...
  );
};

3. 使用 loading 和 isAuthenticated 属性在 JSX 中显示相关选项：

<div ...>
  <Link ...>
    Q & A
  </Link>
  <form onSubmit={h