passport.authenticate('local') в Passport-Local Mongoose, кажется, не работает

Question

Я работаю с Passport-Local Mongoose для аутентификации пользователей, но у меня есть проблемы. Я думаю, что не должно быть никаких проблем, но когда я проверяю логин, сервер возвращает "400 неверных запросов".

Я не могу понять никаких проблем, но я надеюсь, что кто-то может это сделать.

Это мой 'server.js' (только связанные коды).

import session from 'express-session';
import cookieParser from 'cookie-parser';
import passport from 'passport';
import User from './models/user.model';

app.use(cookieParser());
app.use(session({
  secret: 'my secret',
  resave: false,
  saveUninitialized: false,
}));

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

passport.use(User.createStrategy());
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

import UserRouter from './api/user.router';

app.use(UserRouter);

и 'user.model.js':

import mongoose from 'mongoose';
import passportLocalMongoose from 'passport-local-mongoose';

const Schema = mongoose.Schema;

const userSchema = new Schema({
  email: { type: String, required: true },
  password: { type: String, required: true },
  lastLogin: { type: Number, default: Date.now, required: true },
});

userSchema.plugin(passportLocalMongoose, {
  usernameField: 'email',
  lastLoginField: 'lastLogin',
  hashField: 'password',
});

export default mongoose.model('User', userSchema);

и 'user.router.js':

import { Router } from 'express';
import User from '../models/user.model';
import passport from 'passport';

const router = new Router();

router.post('/api/login',
  passport.authenticate('local'),
  (req, res) => {
    res.json({ user: req.user });
  }
);

и наконец 'LoginModal.jsx':

import React, { PropTypes } from 'react';
import CustomModal from '../Common/CustomModal';
import { browserHistory } from 'react-router';

class LoginModal extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'LoginModal';
    this.state = {
      showModal: this.props.show,
      email: '',
      password: '',
    };
    this._handleInputChange = this._handleInputChange.bind(this);
    this._handleOnLoginClick = this._handleOnLoginClick.bind(this);
  }
  _handleInputChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }
  _handleOnLoginClick() {
    const formData = new FormData();
    formData.append('email', this.state.email);
    formData.append('password', this.state.password);
    request.post('/api/login')
    .send(formData)
    .end((err, res) => {
      if (err || !res.user) {
        browserHistory.push('/');
      } else {
        browserHistory.push('/');
      }
    });
  }
  render() {
    const bodyComponent = () => {
      return (
        <fieldset>
          <label className="block clearfix">
            <span className="block input-icon input-icon-right">
            <input type="text" className="form-control" placeholder="E-MAIL"
              name="email" value={this.state.email} onChange={this._handleInputChange}
            />
            <i className="ace-icon fa fa-user"></i>
          </span>
          </label>
          <label className="block clearfix">
            <span className="block input-icon input-icon-right">
            <input type="password" className="form-control" placeholder="PASSWORD"
              name="password" value={this.state.password} onChange={this._handleInputChange}
            />
            <i className="ace-icon fa fa-lock"></i>
          </span>
          </label>
        </fieldset>
      );
    };
    const footerComponent = () => {
      return (
        <div className="clearfix" style={{ textAlign: 'left' }}>
          <label className="inline" style={{ marginTop: '6px' }}> <input type="checkbox" className="ace" name="remember" value="yes"/>
            <span className="lbl"> REMEMBER ME</span>
          </label>
          <button type="button" className="width-35 pull-right btn btn-sm btn-primary" onClick={this._handleOnLoginClick}>
            <i className="ace-icon fa fa-key"></i> <span className="bigger-110">LOGIN</span>
          </button>
        </div>
      );
    };
    return (
      <div>
        <CustomModal show={this.state.showModal}
          title="LOGIN"
          bodyComponent={bodyComponent()}
          footerComponent={footerComponent()}
          width="300px"
          close={this.props.close}
          backdrop
        />
      </div>
    );
  }
}

Answer 1

Я сам это выяснил. Функция passport.authenticate(), кажется, не поддерживает тип содержимого 'form-data'.

Я отправлял данные для входа в систему, используя "FormData.js", который отправляет тип контента с параметрами данных как "form-data" в "LoginModal.jsx".

Я изменил этот код, как показано ниже, и он работает.

$.ajax({
  url: '/api/login',
  type: 'post',
  data: { email: this.state.email, password: this.state.password },
  success: () => {
    browserHistory.push('/login-success');
  },
  error: (err) => {
    console.log(err);
  }
});