Passport- 로컬 몽구스에서 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'

(210)

마지막으로 '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을 지원하지 않는 것 같습니다.

'LoginModal.jsx'에서 데이터 설정 content-type을 'form-data'로 보내는 '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); 
    } 
});