我创建了一个简单的应用程序,该应用程序可以让用户登录并将api令牌保存在asyncstorage中,现在,当用户通过身份验证时,路由更改为“欢迎”屏幕。这可以。现在的问题是,当我重新加载该应用程序时,该应用程序将返回到其本地路由,并且即使已通过验证,模拟器的“后退”按钮也会返回到登录页面。
我需要一些指导来做什么。
import React, { Component } from "react";
import { StyleSheet, AsyncStorage } from "react-native";
import { Scene, Router, Actions } from "react-native-router-flux";
import HomeScreen from "./components/HomeScreen";
import LoginForm from "./components/LoginForm";
import { connect } from "react-redux";
import { initApp } from "./actions";
import RegistrationScreen from "./components/RegistrationScreen";
import ProfileScreen from "./components/ProfileScreen";
import MenuBarScreen from "./components/MenuBarScreen";
import I18n from "./i18n";
import axios from "axios";
class Routes extends Component {
constructor() {
super();
this.initApp = this.initApp.bind(this);
}
initApp = async () => {
I18n.initAsync();
let userToken = await AsyncStorage.getItem("token");
let userAuthStatus = await AsyncStorage.getItem("userAuthStatus");
console.log("token alreaday stored : ", userToken);
console.log("status already set : ", userAuthStatus);
if (userAuthStatus === null) {
console.log("Writing data!");
let tmpToken = "";
await fetch("http://e53a6273.ngrok.io/api/v1/me")
.then(response => response.json())
.then(data => {
tmpToken = data.tmpToken;
this.props.initApp(false);
console.log("server tmpToken : " + data.tmpToken);
console.log(
"app Status when user is not loggedin : " + this.props.appIsready
);
})
.catch(error => {});
userToken = await AsyncStorage.setItem("token", tmpToken);
userAuthStatus = await AsyncStorage.setItem("userAuthStatus", null);
console.log("New token " + userToken);
console.log("New userAuthStatus " + userAuthStatus);
} else {
let config = {
headers: { "Content-Type": "application/json" }
};
await axios
.post(
`http://e53a6273.ngrok.io/api/v1/authenticateWithToken/${userToken}`,
{ userToken: userToken },
config
)
.then(response => {
if (response.status >= 200 && response.status < 300) {
console.log("server status " + response.data.authenticationStatus);
this.props.initApp(response.data.authenticationStatus);
}
})
.catch(error => {
console.log(error);
});
}
};
componentWillMount() {
this.initApp();
}
render() {
console.log(
"route is mounted and initial app status is : " + this.props.appIsready
);
return (
<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle}>
<Scene key="root" hideNavBar>
<Scene key="auth" initial={this.props.appIsready ? false : true}>
<Scene
key="home"
component={HomeScreen}
title="MAZHR"
/>
<Scene key="login" component={LoginForm} title="Login" />
<Scene
key="register"
component={RegistrationScreen}
title="Register"
/>
</Scene>
<Scene key="authenticatedScene" initial={this.props.appIsready ? true : false}>
<Scene
rightTitle="Menu"
onRight={() => {
Actions.menuBar();
}}
key="userProfile"
component={ProfileScreen}
title="profile"
/>
</Scene>
<Scene key="menuBar" component={MenuBarScreen} title="" hideNavBar />
</Scene>
</Router>
);
}
}
const styles = StyleSheet.create({
navBar: {
backgroundColor: "#1F5F5A"
},
navTitle: {
color: "#fff"
}
});
const mapStateToProps = ({ authReducer }) => {
const { appIsready } = authReducer;
return {
appIsready
};
};
export default connect(
mapStateToProps,
{ initApp }
)(Routes);