Аутентификация в React Native с помощью AsyncStorage

#reactjs #react-native #jwt

#reactjs #react-native #jwt

Вопрос:

В моем проекте, когда uid сохраняется в AsyncStorage, это означает, что пользователь уже вошел в систему.


Текущий код

Index.js

 import React from 'react';
import Auth from 'app/src/common/Auth';
import { Text } from 'react-native';

export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     auth: true,
    };
  }

  async componentDidMount() {
    await this.setState({ auth: await Auth.user() });
  }

  render() {
   const { auth } = this.state;
     return (
       {!auth ? (
         <Text>You need to Log In!</Text>
       ) : (
         <Text>You are Logged In!</Text>
       )}
     )
  }
}
  

Auth.js

 import { AsyncStorage } from 'react-native';

export default {
  async user() {
    let result = true;
    const response = await AsyncStorage.getItem('uid');
    if (!response) {
      result = false;
    }
    return resu<
  },
};
  

Этот код работает, но я хотел бы сделать это более простым, как одна функция.

Я был бы признателен, если бы вы могли дать мне какой-либо совет.

Ответ №1:

Вы можете использовать promise и выполнять всю работу в Index.js как

 AsyncStorage.getItem('uid').then((uid) => {
    this.setState({
        auth : (uid) ? true : false
    })
})
  

или просто используйте

 const uid = await AsyncStorage.getItem('uid');
this.setState({ auth : (uid) ? true : false  });
  

Ответ №2:

Собираетесь ли вы использовать это более чем в одном месте? почему бы просто не сделать это в вашем компоненте?

   async componentDidMount() {
    const auth = await AsyncStorage.getItem('uid');
    this.setState({ auth });
  }
  

Комментарии:

1. Да, я собираюсь использовать это более чем в одном месте.

2. используете ли вы какое-либо глобальное управление состоянием, такое как redux? потому что тогда вы можете извлечь его один раз здесь и получить значение из redux в любом другом компоненте, который вам нужен

3. Я не использую redux. Спасибо, похоже, есть способы получше, чем мой текущий.