如何从服务器接收API响应正文中的JWT令牌并使用javascript和react-18将其保存在用户身上？

Question

在此处输入图像描述我有一个 mongo DB 服务器，当您输入正确的用户名和密码时，它会设置一个 API，它会在响应正文中发送 JWT 访问令牌，如图所示。 （需要电子邮件和密码进行验证）

我现在正在构建一个前端应用程序来发布一个工作正常的身份验证请求，但是我想要做的是将响应正文存储在 cookie 中，并使用要发送的 x-auth-toekn 密钥所有 api 请求的正文。聊天 gpt 吐出了这个，它说它将响应保存在 cookie 中，但是在开发工具应用程序选项卡中我没有看到任何保存的内容。

前端代码如下，我正在接收 api 负载的响应，但它没有被存储。我希望能够重用该令牌（仅供参考，稍后将找出刷新令牌）

import React, { useState } from "react";

const LoginForm: React.FC = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [token, setToken] = useState<string | null>(null);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    try {
      const response = await fetch("https://myapi.com/api/auth", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email, password }),
      });

      if (!response.ok) {
        throw new Error("Failed to login");
      }

      const jsonResponse = await response.json();
      const authToken = jsonResponse["x-auth-token"];

      if (authToken) {
        // Save token in cookie
        document.cookie = `authToken=${authToken}; path=/`;

        // Alternatively, save token in local storage
        // localStorage.setItem('authToken', authToken);

        setToken(authToken);
        console.log("Token:", authToken);
      } else {
        throw new Error("Token not found in response");
      }
    } catch (error) {
      console.error("Login Error:", error.message);
    }
  };

  return (
    <div>
      <h2>Login Form</h2>
      {token ? (
        <p>Logged in! Token: {token}</p>
      ) : (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="email">Email:</label>
            <input
              type="email"
              id="email"
              name="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="password">Password:</label>
            <input
              type="password"
              id="password"
              name="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button type="submit">Login</button>
        </form>
      )}
    </div>
  );
};

export default LoginForm;

图片显示 JWT 从我的 API 到达响应正文，我假设它是 json，但响应中没有括号。

Answer 1

我找到了答案，就是这样

文档.cookie =

x-auth-token=${response.data}

;