如何在react-oauth的useGoogleLogin中动态传入state令牌

你可以利用useGoogleLogin返回的登录函数支持动态传入配置参数的特性来实现，无需打破React Hooks规则，具体步骤如下：

1. 重构登录按钮的点击事件处理逻辑，先异步获取后端的state令牌，再调用登录函数时传入动态state：

const googleLogin = useGoogleLogin({
    ux_mode: "redirect",
    state: "default-token", // 初始值设为占位符，后续会被覆盖
    redirect_uri: "http://localhost:3000/auth/google/callback/",
    flow: "auth-code",
    scope: "https://www.googleapis.com/auth/drive.readonly",
    onSuccess: (codeResponse) => console.log('Login OK so far'),
    onError: (error) => console.log('Login Failed:', error)
});

// 新增异步处理函数
const handleGoogleLogin = async () => {
    // 先获取后端生成的临时state令牌
    const token = await api.user.getStateToken();
    // 调用登录函数时传入动态state，覆盖初始配置
    googleLogin({ state: token });
};

2. 更新按钮的点击绑定：

<button onClick={handleGoogleLogin}>Sign in with Google 🚀 </button>

原理说明 #

useGoogleLogin返回的登录函数允许传入一个可选的配置对象，该对象会与Hook初始化时的配置进行合并，且动态传入的参数优先级更高。这种方式既遵守了React Hooks的调用规则（useGoogleLogin仍在组件顶层调用），又实现了点击时动态获取并设置state的需求，比手动构造OAuth跳转URL更贴合react-oauth库的封装逻辑。

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