1

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

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

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

4

1 回答 1

0

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

  1. 我使用了材料 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>
    );
};

  1. 创建一个检查当前用户的节点服务。类似的东西req.user会显示谁登录了。

  2. 为当前用户添加一个监听器调用它componentDidMount/useEffect。我在导航栏组件上调用了它，因此它在每个页面加载时调用它作为侦听器。

  3. 使用 redux 将 isAuthenticated 道具传递给您的组件。

  4. 使用 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 数据。那是我能解释的最好方法。

于 2020-08-02T21:07:33.757 回答