我需要为我的 React 应用程序实现 OAuth。请有任何建议答案

【问题标题】：I need to implement OAuth for my React Application. Any suggestions please我需要为我的 React 应用程序实现 OAuth。请有任何建议
【发布时间】：2021-12-06 21:51:40
【问题描述】：

应该完成加载应用程序身份验证。所以我想将 OAuth 添加到我的反应应用程序中。

【问题讨论】：

标签： reactjs authentication oauth

【解决方案1】：

我使用这种模式

首先，定义Loading组件

const Loading = ({ children, loading }) => {
    if (loading) return (
        <div className="loading" />
    );

    return children;
}

定义OAuth组件

import { useState, useEffect } from "react";
import { useHistoty } from " react-router-dom";
import Loading from "...";

const OAuth = ({ children, redirectTo = "/login" }) => {
    const history = useHistory();
    const [authorizing, setAuthorizing] = useState(true);

    useEffect(() => {
        //do anything

        if (yes) setAuthorizing(false);
        else {
            history.replace({
                pathname: redirectTo
            )};
        }
    }, []);

    return (
        <Loading loading={authorizing}>
            {children}
        </Loading>
    );
};

使用它

import OAuth from "...";

const Component = () => {
    return (
        <OAuth>
            <div />
        </OAuth>
    );
};
``|

【讨论】：

【解决方案2】：

要考虑的一种方法是从对用户进行身份验证的 Web 服务器加载您的应用程序，也就是说，不是将用户身份验证为应用程序的一部分，而是将该任务外包给 Web 服务器或前面的反向代理它。

【讨论】：