發生反應，與錯誤的請求

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的這個錯誤，但我不知道如何解決這個問題。

我使用這個庫如何參考：https://github.com/reactjs/react-router/blob/master/examples/auth-flow/auth.js

這裏是我的LoginPage：

「使用嚴格的」

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

這僅僅是因爲你還沒有處理在阿賈克斯錯誤回調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}); } 
     }) 
    },