Can't render html with express router and passport: Bad Request or Not Found error

问题

I have an express Router set up for the url that starts from /auth. Inside the file where the /auth routes are defined I am sending a whole html page to start my React app. In the html page I have many static resources that must reference the public folder. Unfortunately it is not happening. I think I need to additionally redirect or set static resources for the Router file itself. Here is the main app.js file relevant code:

var express = require('express');
var app = express();
app.use(express.static(path.join(__dirname, '/public/')));
app.use(express.static(__dirname + '/node_modules/'));
var index = require('./routes/index');
app.use('/auth', index);

Inside the index.js I am trying to serve an html page:

var express = require('express');
var router = express.Router();
var path = require('path');

router.get('/:id', function(req, res) {
  userAuthId = req.params.id;
  console.log(userAuthId);
  console.log("router of index.js is sending app.html");
  var appPath = path.join(__dirname, '..', 'public', 'app.html');
  res.sendFile(appPath);
});

In the app.js file a redirect happens upon log in process to /auth/:id. Middleware launches the router.get method that you can see above, and I see the console.log() outputs in it. However, I am getting 404 Not Found error. I checked the appPath and it is correct: I can open up the link in the browser manually. So, I think it may be the issue of static resources defined on the page itself, but not completely sure. The app.html looks like that:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="/stylesheets/pretty-checkbox.min.css">
    <link rel="stylesheet" href="/stylesheets/nv.d3.css">
    <link rel="stylesheet" href="/stylesheets/autosuggest.css">
    <link rel="stylesheet" href="/stylesheets/sidebar.css">
    <link rel="stylesheet" href="/stylesheets/main.css">
    <link rel="stylesheet" href="/stylesheets/distrochart.css">
    <link rel="stylesheet" href="/stylesheets/gene-tree-chart.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    <script type="text/javascript" src="cacheJS.js" charset="utf-8"></script>
    <script type="text/javascript" src="distrochart.js" charset="utf-8"></script>
  </body>
</html>

I am also using passport and in reality need to have the following:

app.use('/auth', passport.authenticate(['facebook-token', 'local-signup']), index);

If I do it this way I am just getting error 400 Bad Request for the redirect /auth/:id. Any suggestions would be greatly appreciated.

The following can also be of interest, the actual place where the redirect to /auth/:id happens:

app.post('/login', function(req, res, next) {
  passport.authenticate('local-signup', function(err, user, info) {
    console.log('passport callback');
    console.log(err);
    console.log(info);
    if (err) { return next(err); }
    if (!user) { return res.status(401).json(info); }
    req.logIn(user, function(err) {
      console.log('logIn function of /login path');
      if (err) { return next(err); }
      return res.redirect('/auth/' + user.local.username);
    });
  })(req, res, next);
  console.log('end of login function');
});

So, from my understanding the passport callback completes successfully since redirect happens.

Update

2 months passed, I still was not able to make it working. Tried giving up passport.authenticate to do:

app.post('/login', function(req, res, next) {
  if(req.isAuthenticated()) {
    res.redirect('/auth/' + req.user.local.username);
  }
  return res.redirect('/login');
})

As suggested here:

https://github.com/jaredhanson/passport/issues/371

No success. I believe that I tried nearly everything online that I could possibly find and nothing is just working. I am thinking of abandoning passport altogether.

来源：https://stackoverflow.com/questions/54337431/cant-render-html-with-express-router-and-passport-bad-request-or-not-found-err

标签

node.js

passport.js

express-router