0
fetch('http://url.com/api/login', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
    hashHistory.push('/home')        //跳转到home
  })    
  .catch(function(error) {
    console.log('request failed', error)
  })

如上代码,登录信息通过API发送出去后,如果成功需要跳转到/home,但这么写似乎不行,因为试了两下,无论成功失败都会跳转。

应该如何写,才能正确判断登录成功与否做不同的动作呢?

如果失败会返回:

clipboard.png

夜鹰 734
2016-07-15 提问
2 个回答
2

已采纳

401是在then里面。

fetch('http://url.com/api/login', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(function(res) {
    if (res.ok) {
      console.log('request succeeded with JSON response', data)
      hashHistory.push('/home')        //跳转到home
    } else if (res.status == 401) { //处理http状态码
      alert("unauthorized");
    }
  })    
  .catch(function(error) {
    console.log('request failed', error)
  })
0

@LionKissDeer
紧接着还有个问题,关于消息传递
页面上的header是一个组件,有两个按钮
clipboard.png
点击登录,会进入登录页面、填写信息提交、经过上面的ajax请求、返回200,然后需要跳转到/home页面,这时候应该传一个消息到Header组件,让这两个按钮消失并显示已登录的用户名吧?
请问传值的动作在这句代码hashHistory.push('/home')里应该怎么改呢?

最不明白的Header,应该怎样接收Login组件传过来的值,并让两个按钮消失?然后渲染一个新<div>用户名</div>呢?

import React, { Component } from 'react';
import { Link } from 'react-router';

class Header extends Component {
  render() {
    let styles = {
          ....
      }
    }
    return (
      <div style={styles.headerStyle}>
        <Link to="/login" style={styles.linkStyle}>登录</Link>
        <Link to="/signup" style={styles.linkStyle}>注册</Link>
      </div>
    )
  }
}

export default Header;

或者有没有什么案例能参考一下?

2
回复 夜鹰

oh man

LiuuY · 2016年07月15日

展开评论

撰写答案

推广链接