Question

我是react-native的新手，我只想通过JSON API创建登录功能并存储用户ID的JWT令牌，我的应用程序即可登录，但是问题是当我退出应用程序后登录，我得到然后再次登录。我在问题中发布了Authloading和登录屏幕。请检查我的完整代码。这是我的初始屏幕。

class AuthLoadingScreen extends Component {
 constructor(props) {
 super(props);
 this.loadData();
  }
 render() {
  return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
    <ActivityIndicator />
    <StatusBar barStyle="default" />
  </View>
  );
 }
  loadData = async () => {         
 const isLoggedIn = await AsyncStorage.getItem('isLoggedIn')        
this.props.navigation.navigate(isLoggedIn != 'null' ? 'loginnavigator' : 'drawernavigator') }
 }

这是我的登录屏幕

 class Login extends Component {
  constructor(props) {
   super(props);
   this.state = {
  TextInputEmail: '',
  TextInputPassword: '',
  };
 }

 CheckTextInput = async () => {
  console.log(this.state.TextInputEmail);
   let pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
   if (this.state.TextInputEmail != '') {
   if (this.state.TextInputPassword != '') {
    if(pattern.test(this.state.TextInputEmail) === true){

        await fetch('http://104.197.28.169:3000/auth/login?', {
          method: 'POST',
          headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           email: this.state.TextInputEmail,
           password: this.state.TextInputPassword,

         })          
       }).then((response) => response.json())
            .then((responseJson) => {
              if(responseJson.message === "user logged in successfully")
               {
                   alert('User login Successfully')
                   console.log('Token' , responseJson.token)

              AsyncStorage.setItem('isLoggedIn',responseJson.token);
                  this.props.navigation.navigate('drawernavigator');           
               }
               else{
                            alert(responseJson.message);
              }

             }).done()
    } else {
      alert('Invalid email Address')
    }
  }
  else alert('Please Enter Password');

 } else alert('Please Enter Email & Password');
};


 const LoginNavgation = createStackNavigator(
 { screen : Login, },
 {
 defaultNavigationOptions: {
  header: null,
 }
},
);
const mydrawer = createStackNavigator(
{ app: AppContainer },
{
defaultNavigationOptions: {
  header: null,
}
});

这是我的导航代码。

  export default createAppContainer(createSwitchNavigator(
 {
  AuthLoading: AuthLoadingScreen,
  loginnavigator: LoginNavgation ,
  drawernavigator: mydrawer,
 },
));

Answer 1

您在做什么错了：

this.props.navigation.navigate(isLoggedIn != 'null' ? 'loginnavigator' : 'drawernavigator') }

在这里，您将在isLogged中获得一个令牌，该令牌将不等于null，如果不为null，则需要显示抽屉导航器。

执行此操作：

this.props.navigation.navigate(isLoggedIn != 'null' ? 'drawernavigator' : 'loginnavigator') }

希望这会有所帮助！

如何通过React-Native中的异步存储通过JWT令牌保存用户ID和密码

1 个答案: