は不正な要求

Question

私はこの方法を使用してjQueryを介して、ログインをチェックしていて動作していない反応する：ユーザ名とパスワードは、それがアプリページにリダイレクト正しければ

module.exports = { 
    login: function(username, pass, cb) { 
     if (localStorage.token) { 
      if (cb) cb(true) 
      return 
     } 
     this.getToken(username, pass, (res) => { 
      if (res.authenticated) { 
       localStorage.token = res.token 
       if (cb) cb(true) 
      } else { 
       if (cb) cb(false) 
      } 
     }) 
    },   

    logout: function() { 
     delete localStorage.token 
    }, 

    loggedIn: function() { 
     return !!localStorage.token 
    }, 

    getToken: function(username, pass, cb) { 
     $.ajax({ 
      type: 'POST', 
      url: '/obtain-auth-token/', 
      data: { 
       email_or_username: username, 
       password: pass 
      }, 
      success: function(res){ 
       cb({ 
        authenticated: true, 
        token: res.token 
       }) 
      } 
     }) 
    }, 
} 

マイログイン検証は、正常に動作しています。間違っている場合しかし、私はターミナルで、このメッセージが表示されます。

POST http://url_base/obtain-auth-token/ 400（不正なリクエスト）

と、この要素：

<p>Bad login information</p> 

は私のログインページに表示されません。

私はこの問題がjQueryのこのエラーだと思いますが、これを解決する方法はわかりません。

私が参照どのようにこのリポジトリを使用しています：それはあなたがAjaxのエラーコールバックを処理していないという理由だけで

import React from 'react' 
import { Router, browserHistory } from 'react-router' 
import '../../../css/login.css' 
import '../../../css/animation.css' 
import Logo from '../icons/Logo' 
import auth from './auth' 

class LoginPage extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.handleSubmit = this.handleSubmit.bind(this); 
     this.state = { 
      error: false, 
      loggedIn: auth.loggedIn() 
     } 

    } 

    handleSubmit(ev) { 
     ev.preventDefault() 

     var username = this.refs.username.value 
     var pass = this.refs.pass.value 

     auth.login(username, pass, (loggedIn) => { 
      if (loggedIn) { 
       const { location } = this.props 
       if (location.state && location.state.nextPathname) { 
        browserHistory.push(location.state.nextPathname) 
       } else { 
        browserHistory.push('app') 
       } 
      } 
      else{ 
       this.setState({error:true}); 
      } 
     }) 
    } 



    render() { 

     return (
      <div id="login" className="login"> 
       <div className="login-content"> 
        <div id="login-content-container" className="login-content-container"> 
         <Logo svgClass="login-content-container-logo" width="270" height="35"/> 
         <form className="login-content-container-form" onSubmit={this.handleSubmit}> 
          <input className="login-content-container-form-input" type="text" ref="username" placeholder="username"/> 
          <input className="login-content-container-form-input" type="password" ref="pass" placeholder="password"/> 
          <button className="login-content-container-form-button">login</button> 
         </form> 
         {this.state.error && (
          <p>Bad login information</p> 
         )} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

export default LoginPage 

Answer 1

'厳格な使用'：ここでhttps://github.com/reactjs/react-router/blob/master/examples/auth-flow/auth.js

は私LoginPageですが、 getToken

getToken: function(username, pass, cb) { 
     $.ajax({ 
      type: 'POST', 
      url: '/obtain-auth-token/', 
      data: { 
       email_or_username: username, 
       password: pass 
      }, 
      success: function(res){ 
       cb({ 
        authenticated: true, 
        token: res.token 
       }) 
      }, 
      error: function() { cb({authenticated: false}); } 
     }) 
    },