如何在 React 中使用 PassportJS OAuth 策略？答案

【问题标题】：How to use PassportJS OAuth strategies with React?如何在 React 中使用 PassportJS OAuth 策略？
【发布时间】：2020-11-22 23:37:03
【问题描述】：

有很多资源解释了如何集成 PassportJS 来为您的应用程序进行用户身份验证（使用本地和 OAuth 策略）。其中很少有关于 ReactJS + REST API 类型的应用程序的解释。

目前我有一些样板代码几乎可以正常工作，但是，不是我想要的方式。每当用户单击属于 OAuth 提供程序的按钮时，我的客户将window.location = 'http://localhost:5000/api/auth/${href}'（其中“href”是例如“facebook”）。

这样做的问题是，这将导致 React 应用程序失去其状态（我不希望这样做）。在我的情况下，简单地获取端点也不起作用，因为它不会将用户重定向到 FB 进行登录。

【问题讨论】：

Passport 是 Node（后端）的一个包，没有反应...您可以查看 npmjs.com/package/react-google-login 用于 google，还有更多用于 FB 等...
@SakoBu 请再次阅读问题。显然我是使用 Node 来配置 PassportJS，但是，最终客户端必须向服务器发出相关请求才能使身份验证系统正常工作。

标签： reactjs passport.js passport-google-oauth

【解决方案1】：

无法给你一个确切的答案，因为没有代码可以使用，但我可以说这是我使用护照谷歌在我的一个个人项目中所做的。

我使用了 Material ui 风格的谷歌登录

这是一个示例

const GoogleLoginButton = () => {
    const classes = useStyles({});

    return (
        <a href={process.env.REACT_APP_BASE_URL + "/api/v1/users/auth/google"} className={classes.button}>
            <div className={classes.wrapper}>
                <svg className={classes.icon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3">
                    <path fill="#4285f4" d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" />
                    <path fill="#34a853" d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" />
                    <path fill="#fbbc04" d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" />
                    <path fill="#ea4335" d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" />
                </svg>
            </div>
            <p className={classes.text}>Login with Google</p>
        </a>
    );
};

创建一个检查当前用户的节点服务。类似于req.user 的内容将显示谁已登录。
为当前用户添加一个侦听器，在componentDidMount/useEffect 中调用它。我在导航栏组件上调用了它，因此它在每个页面加载时调用它作为侦听器。
使用 redux 将 isAuthenticated 属性传递给您的组件。

使用 localStore 来持久化数据。我正在使用 sagas，所以我做了这样的事情

 export function* getAutoLoginStatus(action) {
  try {
     const login = yield call(api.user.currentUser);
     const token = login.token;

     if (login.user.googleId !== null) {
         localStorage.setItem("googleId", login.user.googleId);
     }
     setAuthToken(token);
     sessionData.setUserLoggedIn(token);
     yield put(actionTypes.getUserSuccess(login));
  } catch (error) {
     localStorage.clear();
     yield put(actionTypes.getUserFailure(error.response.data.message));
  }
 }

主要是使用 redux，并保持数据持久化，并在注销时删除 localStorage 数据。这是我能解释的最好方式。

【讨论】：