我正在尝试为我的react本机应用程序设置身份验证,我遵循了React Navigation Authentication flows 教程,它适用于路由,但是当用户登录或注销时,路由显示为“ AuthStack”“ AdminStack”等
以下是屏幕截图:
通常在用户登录/注销并快速打开导航时发生。
这是我的AppStack:
constructor() {
super();
this._bootstrapAsync();
}
// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = async () => {
const loggedin = await AsyncStorage.getItem('loggedin')
const userLogged = await AsyncStorage.getItem('user');
if (loggedin) {
const user = JSON.parse(userLogged)
const admin = user.auth_lvl > 0 ? true : false
if (admin) {
this.props.navigation.navigate('AdminStack');
} else{
this.props.navigation.navigate('UserStack');
return
}
}else {
this.props.navigation.navigate('AuthStack');
这是我的抽屉选项:
const AuthStack = createDrawerNavigator(
{
Login: Login,Register: Register,Home: Home,Products: Products,Product: Product,},drawerOptions
)
const UserStack = createDrawerNavigator(
{
Home: Home,Orders: Orders,drawerOptions
)
const AdminStack = createDrawerNavigator(
{
Home: Home,AddProduct,ModifyProduct
},drawerOptions
)
const RootStack = createDrawerNavigator(
{
AuthLoading: AuthLoadingScreen,AuthStack: AuthStack,UserStack: UserStack,AdminStack: AdminStack
},drawerOptions
);
export default createAppContainer(RootStack);
我的登录名:
axios
.post("mywebsite.com/api/signin",{
email,password,api_token: 12345
})
.then(async res => {
setLoading(false);
const validUser = res.data;
if (validUser !== "invalid") {
await setLogged(true);
await AsyncStorage.setItem('loggedin','true')
await setauthUser(validUser);
console.log('validuser',validUser);
save(res.data);
return;
}
setMessage("Invalid Credentials");
我的注销:
logout = async () => {
try {
await AsyncStorage.clear();
await setLogged(false);
await setauthUser(null)
nav("AuthStack");
} catch (err) {
alert(err);
}
};
关闭抽屉式导航后,弦线消失,并显示正常路线。这是一个已知的问题?我该如何解决这个问题?在身份验证解决之前,如何防止显示路由?