25、与RESTful API交互及自动化测试指南

与RESTful API交互及自动化测试指南

控制认证选项

在当前应用中，无论用户是否经过认证，所有选项都是可见的。但某些选项只有在用户登录后才能正常工作，例如未登录时提交问题会失败。下面将详细介绍如何控制认证选项，仅向已认证用户显示相关选项。

显示头部的相关选项

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

import { useAuth } from './Auth';

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

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

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

<div ...>
  <Link ...>
    Q & A
  </Link>
  &l