使用react-navigation和redux实现身份验证流程

时间:2019-12-07 08:24:05

标签: react-native redux react-navigation redux-saga

我不知道这里发生了什么。我制作了2个屏幕的简单应用程序,登录成功后,我想更改主页上的屏幕。我正在使用带有react-native的redux,redux-saga和axios

我在登录屏幕上的提交功能是:

home_team_chr

登录成功后,在async submit() { if(this.state.email.length == 0 || this.state.password.length == 0) { alert("Filed is required") } else { if(typeof this.state.email !== 'undefined') { if(!this.state.email.match(/[^@]+@[^.]+\..+/)) { alert("E-mail format wrong!") } else { console.log('ok auth'); let user = { email: this.state.email, password: this.state.password } this.props.login(user) } } } } 中登录传奇故事编写令牌,并且工作正常

AsyncStorage

成功登录后,reducer返回令牌i export function* loginUser(action) { const response = yield call(login_api, action.payload) if(!response || !response.data) { console.log('wrong login 1: ', response); //status 422 Unprocessable Entity return yield put(login_failure('Internal server error for login user')) } if(response.status === 200) { deviceStorage.saveItem('token', response.data.token) return yield put(login_success(response.data, response.data.token)) } else { console.log('wrong login 2'); return yield put(login_failure('Error for login user')) } } ,然后我要在HomePage中重定向。我想在用户每次进入登录页面时注销它,因为我使用componentDidMount()

Login.js
async componentDidMount() { await deviceStorage.deleteToken('token') } componentWillReceiveProps(nextProps) { console.log('enxtProps: ', nextProps.token.length); if(nextProps.token.length > 0) { //TOKEN EXISTS!!! length = 365 this.props.navigation.navigate('HomePage') } else { console.log('Error login'); } this.setState({ token: nextProps.token }) } 中的

this.props.navigation.navigate('HomePage')不会在componentWillReceiveProps上重定向。 有人可以告诉我为什么吗?

1 个答案:

答案 0 :(得分:0)

对于您的代码,我有几点建议。

  1. 在Login-Saga中,等待令牌保存
        deviceStorage.saveItem('token', response.data.token)

更改为

        yield deviceStorage.saveItem('token', response.data.token)
  1. 不要使用componentWillReceiveProps。在版本17之后,在反应和删除中将其标记为“不安全”。使用如下所示的componentDidUpdate。
componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props)
  if (this.props.token !== prevProps.token && this.props.token.length > 0) {
    this.props.navigation.navigate('HomePage')
  } else {
    console.log('Error login');
  }
}