小编Ale*_*aga的帖子

在 Google 身份验证成功后，我需要返回一些信息以供 React 使用，从而允许访问客户端上的私有路由，就像我使用本地策略登录所做的那样（{isAuthenticated: true}发送到 React，React 使用此信息来设置由私有路由包装器组件读取的自定义挂钩的状态，以检查用户是否可以访问应用程序的主页；否则用户将被发送回登录页面）。

但是，由于我需要将用户重定向到http://localhost:5000/auth/google“使用 Google 登录”React 按钮，而 Google 的身份验证路由会处理其余部分，直到将用户重定向到应用程序的主页，所以我不知道如何将其实现只需编写一个res.json像我在策略登录中所做的那样的工作local（在我的最后一次尝试中，这导致json直接发送到浏览器屏幕）。

如果有什么区别的话：我在我的服务器上使用 Passport JWT 来保护路由免受未经身份验证的请求的影响，所以我还在session: falseGoogle 上设置并在之前生成了 JWT 令牌res.redirect。下面是我/auth处理 Google 访问的路线：

auth.js

router.get(
  "/google",
  passport.authenticate("google", {
    scope: ["email", "profile"],
  })
);

const clientUrl =
  process.env.NODE_ENV === "production"
    ? process.env.CLIENT_URL_PROD
    : process.env.CLIENT_URL_DEV;

router.get(
  "/google/movie-log",
  passport.authenticate("google", {
    failureRedirect: clientUrl + "/login",
    session: false,
  }),
  (req, res) => {
    const token = req.user.generateJWT();

    res.cookie("access_token", …

在将 React Router 更新到 v6 后，我正在重构我的 React 应用程序，并且摆脱了路由中遇到的错误，但现在所需的布局已损坏。

我需要包含一个永久工具栏和一个仅在某些页面中可见的侧边栏。我试图遵循文档，但现在布局组件放置在它应该包装的所有页面之上，不仅仅是重叠它们，而且实际上将它们隐藏在后面。

布局组件：

function Layout({ children }) {
  return (
    <div className="layout">
      <Header />
      <SidePanel />
      <div className="main" style={{ marginTop: "100px" }}>
        {children}
      </div>
    </div>
  );
}

export default Layout;

AppRouter 组件：

function AppRouter() {
  return (
    <Router>
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/sign-up" element={<SignUp />} />
        <Route element={<Layout />}>
          <Route path="/diary" element={<Diary />} />
          <Route path="/results" element={<Results />} />
          <Route path="/details" element={<Details />} /> …

我的应用程序使用 Passport Google OAuth2.0，但我发现我需要在前端获得响应来设置授予对私有路由的访问权限的自定义挂钩的状态，而这对于 Passport 来说似乎不可能，因此我遇到了这个react-google-login npm 包，它允许我定义onSuccess回调。

现在，是否可以使这个 React 包与 Passport Google OAuth 策略一起使用而不会发生冲突？我希望 Passport 继续处理数据库上的用户创建并生成 JWT 令牌。我只是不知道如何让他们以我可以回调的方式相互通信onSuccess。

我的Google策略和身份验证路线完全是这样的：

护照.js

passport.use(
    new GoogleStrategy(
      {
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: `${serverUrl}${process.env.GOOGLE_CALLBACK_URL}`,
      },
      function (accessToken, refreshToken, profile, cb) {
        User.findOrCreate(
          { googleId: profile.id },
          { first_name: profile.displayName, email: profile._json.email },
          function (err, user) {
            return cb(err, user);
          }
        );
      }
    )
  );

auth.js

router.get(
  "/google",
  passport.authenticate("google", {
    scope: ["email", "profile"],
  })
);

const clientUrl = …