Невозможно заставить Passport работать с React & Node, без аутентификации Passport работает нормально

Question

Это моя первая попытка использовать Passport JS, и я слежу за их документацией, которую мне очень трудно понять.

Моя цель - зарегистрировать пользователя через страницу регистрации, компонент реакции, а затем использовать страницу входа, также как компонент реакции, для входа и перенаправления на панель мониторинга, которая снова является компонентом реакции.

Все вышеперечисленное работает, но без паспорта. Я не уверен, что делаю неправильно, так как работаю с ним впервые, но похоже, что это не работает. И под неработающим я подразумеваю, что я не вижу сообщений об ошибках, а страница входа не перенаправляется на панель управления. неправильно.

Это мой компонент входа в систему React, который отправляет Ax ios post-запрос в API:

const onSubmit = (e) => {
    e.preventDefault();

    const newLogin = {
      username,
      password,
    };

    const config = {
      headers: {
        'Content-Type': 'application/JSON',
      },
    };

    axios.post('/api/v1/login', newLogin, config).then((res) => {
      return res.data === 'user'
        ? (window.location = '/dashboard')
        : (window.location = '/login');
    });

    setUsername('');
    setPassword('');
  };

На сервере Node. js, указанный выше запрос на вход в систему отправлено контроллеру через маршрутизатор.

сервер. js:

app.use(passport.initialize());
app.use(passport.session());

app.use('/api/v1/register', register);
app.use('/api/v1/login', login);

Маршрутизатор. js (Логин):

const { loginUser } = require('../controllers/loginController');

router.route('/').post(loginUser);

loginController. js:

require('../config/passport')(passport);

exports.loginUser = (req, res, next) => {
  passport.authenticate('local', {
    successRedirect: '/dashboard',
    failureRedirect: '/register',
    failureFlash: true,
  });
};

Это мой паспорт. js файл:

const User = require('../models/UserModel');
const passport = require('passport');

module.exports = function (passport) {
  passport.use(
    new LocalStrategy((username, password, done) => {
      // Match User
      User.findOne({ username: username })
        .then((err, user) => {
          if (!user) {
            return done(null, false, console.log('no user'));
          }

          //Match Password
          bcrypt.compare(password, user.password, (err, isMatch) => {
            if (err) throw err;

            if (isMatch) {
              return done(null, user);
            } else {
              return done(null, false, { message: 'Password incorrect' });
            }
          });
        })
        .catch((err) => console.log(err));
    })
  );
};

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findOne(id, (err, user) => {
    done(err, user);
  });
});

Answer 1

Я бы предложил удалить перенаправления из контроллера входа в систему паспорта и обрабатывать маршрутизацию из реагирующего приложения внутренне (через реагирующий маршрутизатор или иным образом) в зависимости от того, получило ли приложение пользователя в ответе. Вот как я настроил его в моем недавнем проекте:

//router.js
const express = require("express");
const fs = require("fs");
const { userModel } = require("../models");
const passport = require("passport");
const bcrypt = require("bcrypt");
const bodyParser = express.urlencoded({ extended: true, limit: "50mb" });
const jsonParser = express.json({ limit: "50mb" });
const router = express.Router();
const saltRounds = 10;

router.get("/login", (req, res) => {
  res.render("login");
});
router.get("/logout", (req, res, next) => {
  req.logout();
  req.session.destroy();
  next();
});
router.post("/login", bodyParser, jsonParser, **passport.authenticate("local"),** (req, res, next) => {
  if (!req.user) return;
  const date = new Date();
  console.log(`User ID:${req.user._id} logged in at ${date}`);
  res.json(req.user);
  next();
});


module.exports = router;

Обратите внимание, что я просто использую паспорт в качестве промежуточного программного обеспечения, а затем перехожу к следующей функции, которая проверяет пользователя, которого он должен иметь. получено из предыдущей функции