首页 > 关于React实现注册登录的基本逻辑问题

关于React实现注册登录的基本逻辑问题

要用react实现一个注册登录的前端,后台已经做好了,注册、登录的后台接口也有了。

刚进入页面,当然是未登录状态,很自然地点击注册按钮,进入注册页面,填写好注册信息,点提交,点击动作会触发handleClick()函数,该函数源码如下:

handleClick() {
      let data = {
          username : this.state.username,
          nick: this.state.nick,
          password : this.state.password,          //注册时传入的参数
      }
      fetch('http://www.foo.com/api/signup', {    //这里就不显示真实url地址啦
        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)
      })
      .catch(function(error) {
        console.log('request failed', error)
      })
  };

根据console.log()的输出,状态码是200,成功了。
然后我需要跳转到主页并且显示用户昵称,首先跳转需要有个动作,路由已经配置好了:

<Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="/home" component={Home} />
    <Route path="/signup" component={SignUp} />
</Route>

路由跳转的动作应该怎么写?写在哪里?

谢谢


https://github.com/reactjs/react-router/tree/master/examples
中 auth-flow 和 auth-with-shared-root
或者用onEnter,onLeave事件


有两种实现方式

1.直接基于模块进行跳转

import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

具体参考https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md#navigating-outside-of-components

2.基于当前的content的跳转

router.push('/users/12')

// or with a location descriptor object
router.push({
  pathname: '/users/12',
  query: { modal: true },
  state: { fromDashboard: true }
})

具体参考https://github.com/reactjs/react-router/blob/master/docs/API.md#routercontext

【热门文章】
【热门文章】