React Router 拦截对 Express 服务器的 API 调用

Question

我正在使用带有 Passport.js 的 React Router 来设置 Facebook 登录。我已经设置了快速路线和护照配置，但每次我点击 <a href="/api/auth/facebook"> 我客户端的链接，它向 RR 发出请求，因为我的 express 应用程序使用此行：

app.get('/*', function(req, res) {
  res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html'))
});

当我调用服务器端路由时，它返回此错误：

Warning: [react-router] Location "/api/auth/facebook" did not match any routes

我怎样才能绕过这个特定路由的 React Router？

我的 user_routes.js 文件如下所示：

'user strict';

var bodyparser = require('body-parser');
var User = require('../models/User.js');

module.exports = function loadUserRoutes(router, passport) {
  router.use(bodyparser.json());

  router.get('/auth/facebook', passport.authenticate('facebook', {
    session: false,
    successRedirect: '/chat',
    failureRedirect: '/'
  }));

  router.get('/auth/facebook/callback', passport.authenticate('facebook', {
    session: false,
    successRedirect: '/chat',
    failureRedirect: '/'
  }));

  router.post('/sign_up', passport.authenticate('local-signup', { session: false}), function(req, res) {
    res.json(req.user);
  });

  router.post('/sign_in', passport.authenticate('local-login', { session: false}), function(req, res) {
    res.json(req.user);
  });

  router.get('/signout', function(req, res) {
    req.logout();
    res.end();
  });

  //get auth credentials from server
  router.get('/load_auth_into_state', function(req, res) {
    res.json(req.user);
  });

  // get usernames for validating whether a username is available
  router.get('/all_usernames', function(req, res) {
    User.find({'local.username': { $exists: true } }, {'local.username': 1, _id:0}, function(err, data) {
      if(err) {
        console.log(err);
        return res.status(500).json({msg: 'internal server error'});
      }
      res.json(data);
    });
  })
};

Answer 1

在快速路由中，它们按照定义的顺序进行匹配。

因此，在您的 /* 路由之前，您需要一些东西来处理 api 请求。

app.get('/api/auth/facebook', passport.authenticate('facebook'))

app.get('/*', function(req, res) {
  res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html'))
});