12、构建单页应用及部署监控指南

构建单页应用及部署监控指南

1. 密码管理页面添加

1.1 忘记密码功能

当用户忘记密码时，需要请求重置链接来重置密码。用户需输入邮箱，系统会使用成员 API 发送密码重置邮件，若失败则显示通用错误。

代码实现

以下代码应放在 frontend/src/pages/ForgottenPassword.tsx 中：

import axios from "axios";
import { useContext } from "react";
import { useNavigate } from "react-router";

import { useMutation } from "src/query";
import { ToastContext } from "src/ToastContext";
interface IForm {
  email: string;
}

const useForgottenPassword = () => {
  const navigate = useNavigate();
  const { addToast } = useContext(ToastContext);

  const { mutateAsync: forgottenPassword } = useMutation(
    async (data: IForm) => 
      await axios.post("/members/forgotten-password/", data),
  ); 
  r