通过反应导航和还原来实现认证流程

Question

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

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

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中写入传奇令牌，并且可以正常工作

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'))
    }
}

成功登录后，reducer返回令牌i Login.js，然后我要在HomePage中重定向。我想在用户每次进入登录页面时将其注销，因为我使用componentDidMount（）

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]不会在HomePage上重定向。有人可以告诉我为什么吗？

Answer 1

我对您的代码有一些建议。

1. 在登录传奇中，等待令牌保存

        deviceStorage.saveItem('token', response.data.token)

更改为

        yield deviceStorage.saveItem('token', response.data.token)

2. 不要使用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');
  }
}