时间戳

首页 > 解决方案 > React 和 React Router DOM - NavLink 和 Link 不会触发基于 API 的 OAuth 流

reactjs - React 和 React Router DOM - NavLink 和 Link 不会触发基于 API 的 OAuth 流

问题描述

到目前为止，我正在构建一个非常简单的应用程序，它使用带有基本 API 和 React 前端的 Node/Express 服务器。

在 Node/Express 中，我使用 Passport，因此用户可以使用 100% 工作的 Google 登录。但是，仅在使用<a>标签时。

如果我使用<NavLink>或<Link>地址栏显示更新后的 URL /auth/google，但它不会触发流程。

在这种情况下，react-router-dom 库中是否有一些陷阱？

节点/快递：authRoutes.js

const passport = require("passport");

module.exports = app => {
  app.get(
    "/auth/google",
    passport.authenticate("google", {
      scope: ["profile", "email"]
    })
  );

  app.get(
    "/auth/google/callback",
    passport.authenticate("google"),
    (req, res) => {
      res.redirect("/surveys");
    }
  );

  app.get("/api/logout", (req, res) => {
    req.logout();
    res.send(req.user);
  });

  app.get("/api/current_user", (req, res) => {
    res.send(req.user);
  });
};

反应客户端：setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(proxy(["/api", "/auth/google"], { target: "http://localhost:5000" }));
};

<NavLink>并且<Link>不适用于用户直接访问的以下任何路由：“/auth/google”、“/api/current_user”或“/api/logout”。但是当我使用它们时，<a>它们都工作得很好。

标签： reactjsreact-router-dom

解决方案

如果您向我们展示反应部分和后端会更好。react-router-dom 并不意味着发送任何 GET 请求，因此您可能应该通过 fetch 或 axios 等来处理它......使用一个简单的onClick功能。

<Link to="/anywhere" onClick={() => axios.get("http://localhost:5000/auth/google")}>Google Login</Link>

推荐阅读