我需要为我的React应用程序实现OAuth.有什么建议吗?

Question

应该完成应用程序的负载验证。所以我想添加OAuth到我的react应用程序。

Answer 1

I使用这个模式

首先，定义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>
);
};
``|

Answer 2

可以考虑的一种方法是从认证用户的web服务器加载应用程序，也就是说，与其将用户认证作为应用程序的一部分，不如将该任务外包给web服务器或它前面的反向代理。