Passport - ローカルのMongooseのpassport.authenticate（ 'local'）が動作しないようです

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' content-typeをサポートしていないようです。

私は、 'FormModal.jsx'で 'form-data'としてデータ設定content-typeを送信する 'FormData.js'を使用してログインデータを送信していました。

このコードは次のように変更されています。

$.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); 
    } 
});