使用反应导航和 redux 实现身份验证流

Question

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

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

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

登录 saga 写入令牌在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 返回 iLogin.js的令牌，然后我想在主页中重定向。每当用户进入登录页面时，我都想注销用户，因为我使用 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
})
}

componentWillReceiveProps中的this.props.navigation.navigate('HomePage')不会重定向到HomePage. 有人可以告诉我为什么吗？

Answer 1

我对你的代码有几个建议。

1. 在登录佐贺中等待令牌保存

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

更改为

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

2. 不要使用 componentWillReceiveProps。它在版本 17 之后的 react & remove 中被标记为不安全。使用组件DidUpdate，如下所示。

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