认证服务

许多方法可以将 API 集成到前端，但具体选择哪种方法取决于项目的规模。对于我们的需求，最好将 API 集成逻辑隔离，并通过抽象服务传递给应用组件。

服务

服务方式 在不同应用中具有极佳的可扩展性，同时使应用更易于维护和调试。在现有的 services 目录中，我们将创建以下三个文件：

• services/auth.header.js：处理所有 HTTP 请求中必须包含的通用请求头。
• services/auth.service.js：处理认证相关服务，如注册、登录和登出。
• services/user.service.js：处理与用户资料相关的其他服务，例如上传文件。

头部服务

在 services/auth.header.js 文件中，我们将实现认证请求所需的请求头。

1export default function authHeader() {
2  /**
3   * 从 localStorage 中获取当前用户，并解析为 JSON 格式，
4   * 以便在 JavaScript 中轻松访问用户对象
5   */
6  const user = JSON.parse(localStorage.getItem("user"));
7
8  /**
9   * 检查用户是否存在且包含 token，
10   * 以便在向服务器发起认证请求时使用该 token。
11   * 如果没有用户，则返回空对象，服务器应拒绝该请求
12   */
13  if (user && user.token) {
14    return { "x-access-token": user.token };
15  } else {
16    return {};
17  }
18}

认证服务

我们在 services/auth.service.js 中实现实际的认证服务。前端使用 axios 作为 HTTP 客户端。

1. 导入 axios 并定义 API 端点，如下所示：

   1import axios from "axios";  // HTTP 客户端
   2
   3const API_URL = "http://localhost:4000/api";  // 与服务器通信的 API 端点

2. 实现注册服务，如下所示：

   1/**
   2 * 处理注册的 HTTP 请求，将新用户添加到数据库
   3 * 每个用户需要的数据包括：名字、姓氏、用户名、邮箱和密码
   4 */
   5const signup = ({ firstName, lastName, username, email, password }) => {
   6  return axios.post(`${API_URL}/signup/`, {
   7    firstName,
   8    lastName,
   9    username,
   10    email,
   11    password,
   12  });
   13};

   注意：注册请求不带请求头，因为这是一个公开接口，任何人都可以注册新用户。

3. 实现登录服务，如下所示：

   1/**
   2 * 处理登录的 HTTP 请求，用于访问用户个人资料
   3 * 每个用户需要的数据是用户名或邮箱以及密码
   4 */
   5const login = ({ emailOrUsername, password }) => {
   6  return axios
   7    .post(`${API_URL}/login/`, { emailOrUsername, password })
   8    .then((res) => {
   9      /**
   10       * 登录成功后，将用户数据（包括 token）存储到 localStorage
   11       */
   12      localStorage.setItem("user", JSON.stringify(res.data));
   13      return res.data;
   14    });
   15};

   我们使用 localStorage 存储用户数据，包括用户 token。这样可以在 JavaScript 中访问 token，并在页面刷新或浏览器重启后仍保留数据。

4. 实现登出服务，如下所示：

   1const logout = () => {
   2  localStorage.removeItem("user");
   3};

   目前，我们仅在客户端移除 localStorage 中的 token，因为服务器端无需额外处理。

5. 我们可能还需要一个服务来从 localStorage 获取当前用户信息：

   1const getCurrentUser = () => {
   2  return JSON.parse(localStorage.getItem("user"));
   3};

   虽然未来可能还需要其他服务，但目前我们已经涵盖了所有必要的认证功能。

以下是认证头的完整代码：

1export default function authHeader() {
2  /**
3   * 从 localStorage 中获取当前用户，并解析为 JSON 格式，
4   * 以便在 JavaScript 中轻松访问用户对象
5   */
6  const user = JSON.parse(localStorage.getItem("user"));
7
8  /**
9   * 检查用户是否存在且包含 token，
10   * 以便在向服务器发起认证请求时使用该 token。
11   * 如果没有用户，则返回空对象，服务器应拒绝该请求
12   */
13  if (user && user.token) {
14    return { "x-access-token": user.token };
15  } else {
16    return {};
17  }
18}