本文介绍如何在 React 函数组件中安全、类型安全地封装多个登录方式（如 OAuth、Magic Link），并复用公共逻辑（如 login），避免滥用 eval 和状态冗余，推荐使用类型化对象映射与自定义 Hook 模式。
本文介绍如何在 react 函数组件中安全、类型安全地封装多个登录方式（如 oauth、magic link），并复用公共逻辑（如 `login`），避免滥用 `eval` 和状态冗余，推荐使用类型化对象映射与自定义 hook 模式。
在 React 开发中，常需为不同认证方式（如 OAuth、邮箱验证码、Magic Link）提供统一入口，同时共享核心登录逻辑（例如提交凭证、触发 mutation、处理错误）。但直接在组件内用字符串动态调用函数（如 eval(state)）存在严重风险：不安全、不可调试、绕过 TypeScript 类型检查、破坏 React Hooks 规则，且引入无意义的 useState 使逻辑耦合状态，违背单一职责原则。
✅ 正确做法是将登录方法抽象为纯函数组合，并借助 TypeScript 类型系统和对象字面量映射实现安全分发。推荐将其封装为自定义 Hook（如 useLoginvia），既符合 React 最佳实践，又能自然访问组件内声明的 hooks（如 useMutation、useContext）：
import { useMutation } from '@tanstack/react-query';
type LoginMethods = 'oauth' | 'magic_link';
export function useLoginvia(loginMethod: LoginMethods) {
// ✅ 公共登录逻辑 —— 可自由使用 hooks
const [loginMutation] = useMutation({
mutationFn: (credentials: any) => fetch('/api/login', { method: 'POST', body: JSON.stringify(credentials) })
});
const login = async (payload?: Record<string any>) => {
try {
await loginMutation.mutateAsync(payload);
console.log('Login successful');
} catch (err) {
console.error('Login failed:', err);
}
};
// ✅ 各登录方式作为独立函数，复用 login
const oauth = async () => {
const token = await getOAuthToken(); // 假设的 OAuth 流程
await login({ provider: 'github', token });
};
const magic_link = async () => {
const email = prompt('Enter your email:');
if (email) {
await login({ email, method: 'magic_link' });
}
};
// ✅ 类型安全的对象映射 —— 替代 eval，零运行时开销
const loginMethods: Record<loginmethods> Promise<void>> = {
oauth,
magic_link,
};
return loginMethods[loginMethod];
}</void></loginmethods></string>
使用时简洁明确：
// 在组件中调用
function LoginPage() {
const handleOAuthLogin = useLoginvia('oauth');
const handleMagicLinkLogin = useLoginvia('magic_link');
return (
<div>
<button onclick="{handleOAuthLogin}">Sign in with GitHub</button>
<button onclick="{handleMagicLinkLogin}">Send magic link</button>
</div>
);
}
⚠️ 注意事项：
-
绝不使用
eval：它执行任意字符串代码，极易引发 XSS，且无法被 TypeScript 或 ESLint 检查； -
避免无状态的
useState：若loginmethod是静态传入且不会变更，无需状态管理； -
命名语义化：建议使用
useLoginvia而非loginvia，符合自定义 Hook 命名约定（以use开头）； -
类型收窄优先：用
Record<loginmethods ...></loginmethods>确保编译期校验所有分支，防止新增登录方式时遗漏映射。
该方案兼顾可维护性、类型安全性与 React 生态规范，是处理多策略业务逻辑的标准范式。
