对错误的请求做出反应答案

【问题标题】：react not working with bad request对错误的请求做出反应
【发布时间】：2016-11-02 17:26:39
【问题描述】：

我正在使用以下方法通过 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

这是我的登录页面：

'使用严格'

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

【问题讨论】：

您可能有错误的参数错误。检查您的服务器端并查看您遇到的错误并将其粘贴到此处
这是问题，当我输入用户名和/或密码错误时收到此错误。这会发生
你有任何服务器端日志吗.. 这似乎是你的服务器期待不同的参数
你想要这个吗？ responseText: "{"password":["此字段不得为空。"],"email_or_username":["此字段不得为空。"]}"
您确实只提供了success 回调，但没有向$.ajax 方法提供error 回调。由于它是4xx HTTP 标头，因此应与成功处理方法分开处理。

标签： javascript jquery reactjs

【解决方案1】：

只是因为你没有处理getToken中的ajax错误回调

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}); }
        })
    },

【讨论】：

猜我迟到了..很好！