如何在refine项目中自定义登录页，改用userId替代Email登录

要实现用userId替换默认的Email登录，核心是自定义登录表单字段并适配认证接口的参数映射，具体步骤如下：

1. 自定义登录表单字段 #

利用Refine的AuthPage组件提供的renderForm属性，完全替换默认的email输入框为userId输入框。结合useLogin和useForm钩子处理表单提交逻辑：

import { Link } from "react-router-dom";
import { AuthPage, useLogin } from "@refinedev/mui";
import { TextField, Button, Box } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";

const LoginPage: React.FC = () => {
  const { mutate: login } = useLogin();
  const { register, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      userId: "",
      password: "",
    },
  });

  const onSubmit = (data: { userId: string; password: string }) => {
    // 此处根据你的OAuth2服务要求调整参数名，比如服务端接收userId就传userId
    login({
      userId: data.userId,
      password: data.password,
    });
  };

  return (
    <AuthPage
      type="login"
      rememberMe={
        <div style={{ border: "1px dashed cornflowerblue", padding: 3 }}>
          <input name="CustomRememberMe" type="checkbox" /> 记住我
        </div>
      }
      registerLink={
        <div style={{ border: "1px dashed cornflowerblue", marginTop: 5, padding: 5 }}>
          <Link to="/register">注册</Link>
        </div>
      }
      forgotPasswordLink={
        <div style={{ border: "1px dashed cornflowerblue", marginTop: 5, padding: 5 }}>
          <Link to="/forgot-password">忘记密码</Link>
        </div>
      }
      wrapperProps={{
        style: {
          background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
          position: "absolute",
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        },
      }}
      // 自定义登录表单，替换默认的email字段
      renderForm={() => (
        <Box component="form" onSubmit={handleSubmit(onSubmit)} sx={{ mt: 1 }}>
          <TextField
            margin="normal"
            required
            fullWidth
            id="userId"
            label="用户ID"
            name="userId"
            autoComplete="username"
            autoFocus
            {...register("userId", { required: "用户ID不能为空" })}
            error={!!errors.userId}
            helperText={errors.userId?.message as string}
          />
          <TextField
            margin="normal"
            required
            fullWidth
            name="password"
            label="密码"
            type="password"
            id="password"
            autoComplete="current-password"
            {...register("password", { required: "密码不能为空" })}
            error={!!errors.password}
            helperText={errors.password?.message as string}
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt: 3, mb: 2 }}
          >
            登录
          </Button>
        </Box>
      )}
      renderContent={(content) => (
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
          <h1>登录页</h1>
          {content}
          <h2>底部信息</h2>
        </div>
      )}
    />
  );
};

export default LoginPage;

2. 适配认证接口的参数映射 #

如果你的AuthProvider中默认传递的是email或username参数，需要调整login方法的参数，确保和OAuth2服务要求的userId匹配：

const authProvider: AuthProvider = {
  login: async ({ userId, password }) => {
    // 调用自有OAuth2登录接口，传递userId和password
    const response = await fetch("你的OAuth2登录接口地址", {
      method: "POST",
      body: JSON.stringify({
        userId, // 直接传递userId参数
        password,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (response.ok) {
      const data = await response.json();
      localStorage.setItem("token", data.access_token);
      return {
        success: true,
        redirectTo: "/",
      };
    } else {
      const error = await response.json();
      return {
        success: false,
        error,
      };
    }
  },
  // 其他认证方法（如logout、checkAuth等）保持原有逻辑
};

核心说明 #

• renderForm属性允许完全替换AuthPage的默认表单，自由定义字段类型、标签和校验规则
• useLogin钩子负责触发Refine的认证流程，只需确保传递的参数名和服务端接口一致即可
• 若服务端接收的参数名不是userId（比如username），只需调整login调用和AuthProvider中的参数名即可

内容的提问来源于stack exchange，提问作者hmmftg