时间戳

首页 > 解决方案 > 无法使用 AsyncStorage API 存储登录的用户数据

react-native - 无法使用 AsyncStorage API 存储登录的用户数据

问题描述

我是新来的本地人，所以请多多包涵。

这是我的访问令牌的异步存储，令牌是 API 响应的参数之一。此代码在登录屏幕中

async getToken() {

 try{
 const token = await AsyncStorage.getItem('ACCESS_TOKEN');
 if(token !== null) {
   this.props.navigation.navigate('Profile')
 }
 else{
   this.props.navigation.navigate('Login')
 }
 }
  catch (error){
  console.log('Something went wrong');
 }
 }

 async storeToken(accessToken) {

  try{
   await AsyncStorage.setItem('ACCESS_TOKEN', accessToken);
       this.getToken();
   }
    catch (error) {
     console.log('something went wrong');
   }

   }

当我登录时，它会将我导航到个人资料页面，但在刷新应用程序后它会返回登录页面或我的导航树

这是我的 app.js 设置导航的地方

const TodoNav = StackNavigator({

 Login: { screen: Login },
 SignUp: { screen: SignUp },
 ForgotPassword: { screen: ForgotPassword },
 Profile: { screen: Profile },
 MenuScreen: { screen: MenuScreen },
  }, {
      mode: 'modal'
  })

 export default class App extends Component{

  render() {
   return (
     <TodoNav />
      );
    }
   }

标签： react-nativereact-native-androidreact-native-navigationasyncstorage

解决方案

AsyncStorage 不负责保存应用程序的导航状态，它会在您传递给它时存储数据。有关详细信息，请参阅 AsyncStorage 的文档（此处）为了显示主屏幕，您需要在App.js中检查您的异步存储数据， 然后相应地创建导航堆栈，例如：

如果您找到 AccessToken：

 const TodoNavAuthenticated = StackNavigator({

 Profile: { screen: Profile },
 MenuScreen: { screen: MenuScreen },
  }, {
      mode: 'modal'
  })

如果没有找到 Accesstoken 意味着你没有登录，所以：

const TodoNav = StackNavigator({

 Login: { screen: Login },
 SignUp: { screen: SignUp },
 ForgotPassword: { screen: ForgotPassword },
 Profile: { screen: Profile },
 MenuScreen: { screen: MenuScreen },
  }, {
      mode: 'modal'
  })

<ToDoNav />当您在 App.js 的 render() 方法中使用 ie 时，需要检查这一点。

推荐阅读