Question

我有一个反应应用程序，我试图实现passport.js进行github身份验证。

在passport.js文档之后，我已经设置了一个快速服务器来处理后端的身份验证。我还设置了Github的秘密密钥，可以让它工作。

我的主要问题是，如何使用路由器/路由到GET / POST到快速服务器路由器？

App.js

import { BrowserRouter, Link } from "react-router-dom";
import Route from "react-router-dom/Route";

...

class App extends Component {
  return (
    <BrowserRouter>
      <div className="App">

      <Link to="/auth/github">Login using Github (react route)</Link>

      <Route
        path="/auth/github" exact
        render={() => {
          return <h1>Logging In Using GitHub</h1>;
        }}
      />

    </div>
  </BrowserRouter>
}

index.js

const app = express();
app.use(passport.initialize());
app.use(passport.session());

...

app.get("/auth/github",
  passport.authenticate("github", { scope: ["repo"] }),

  function(req, res) {
    res.send("logging in through github");
  }
);

app.get("/auth/github/redirect",
  passport.authenticate("github", { failureRedirect: "/" }),
  function(req, res) {
    res.redirect("/");
  }
);

Answer 1

拥有一个特定的子路径可能是一个好主意，该子路径指示请求是针对您的服务器而不是您的前端 - 我通常使用/api/...来表示这些路由。

下面，

如何使用反应路由器/路由到GET / POST到快速服务器路由器

你不这样做。您让Web服务器处理它。这些路径的链接应该是硬重定向，而不是ReactRouter.Link链接（使用<a href="..."/>）。

如果你正在使用webpack，你需要设置devServer来将这些请求转发到你的后端 - 我认为语法是

proxy: {
  '/api': {
    target: 'http://localhost:3000/api',
    secure: false
  }
}

然后，在生产中，确保您的网络服务器将这些请求“代理”到您的服务器（以及其他所有请求仅为您的服务器提供服务）。

反应路由器和passport.js

1 个答案: