Как сохранить пользователя в системе (сохранить userId с AsyncStorage)

Question

Я могу войти в систему, используя свое имя пользователя и пароль (жестко запрограммированные), однако после входа в систему я хочу получить некоторые данные из API, что может быть сделано только при условии моей аутентификации.Итак, вопрос в том, как сохранить пользователя в системе?

Я не так хорош в React-Native, поэтому любая помощь будет высоко оценена!

Вот мой код:

import React, { Component } from 'react';
import { Text, View, StyleSheet,AsyncStorage, FlatList, AppRegistry } from 'react-native';
import { ListItem } from 'react-native-elements';


export default class BMPServer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       username: 'testuser', 
       password: 'mypasswordhere',
       signedIn: false,
      checkedSignIn: false 
      };


    this.getAllDocuments();

 }
getAllDocuments = () => {

  fetch('https://example.dk/rest/Login/Authenticate/?businessId=1&solutionId=1', {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              username : this.state.username,
              password : this.state.password,
            })
          }) 

        .then((response) => response.json())

      .then((responseDocs) => {

        console.log("YOU HAVE SUCCSFULLY LOGGED IN:", responseDocs) 

});}

Answer 1

У React Navigation есть пример потока аутентификации с их Switch Navigator на https://reactnavigation.org/docs/en/auth-flow.html

В основном у вас есть специальный навигатор для переключения между зарегистрированным и незарегистрированным пользователем, поскольку AsyncStorage сохраняется, проблем не должно быть.

Вот код, запустите его.Все довольно просто:)

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

class SignInScreen extends React.Component {
  static navigationOptions = {
    title: 'Please sign in',
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Sign in!" onPress={this._signInAsync} />
      </View>
    );
  }

  _signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate('App');
  };
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome to the app!',
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Show me more of the app" onPress={this._showMoreApp} />
        <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
      </View>
    );
  }

  _showMoreApp = () => {
    this.props.navigation.navigate('Other');
  };

  _signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
  };
}

class OtherScreen extends React.Component {
  static navigationOptions = {
    title: 'Lots of features here',
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="I'm done, sign me out" onPress={this._signOutAsync} />
        <StatusBar barStyle="default" />
      </View>
    );
  }

  _signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
  };
}

class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

Answer 2

Я нашел решение своей проблемы. Fetch () устанавливает файлы cookie автоматически, но вы должны включить их при получении: учетные данные: 'include' .Нет необходимости в AsyncStorage или чем-то подобном, это просто пустая трата времени, и, к сожалению, даже после недели поиска этой проблемы я не смог найти решение где-либо в Интернете, и, очевидно, решение очень и оченьпросто.

Подробнее см. код ниже:

getAllDocuments = () => {
    fetch('LOGIN_URL_HERE', {     //*HERE I AM AUTHENTICATING*
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Connection': 'Keep-Alive',
      },
      body: JSON.stringify({
        username: 'myemail',
        password: 'mypassword'
      })
    })
      .then((response) => response.json())

      .then((res) => {

        console.log("This is the user:", res)

        fetch('DOCUMENTS_URL_HERE', {    //*HERE I AM FETCHING DOCUMENTS AFTER I HAVE SUCCESSFULLY AUTHENTICATED*
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          credentials: 'include',     //USE THIS TO SET COOKIES
          body: JSON.stringify({
            lastServerSyncDateAsLong: 0,
            inserted: {},
            edited: {},
            deleted: {}
          })
        })
     .then((res) => res.json())

          .then((ressDocs) => {
            console.log("THESE ARE ALL DOCUMENTS FETCHED FROM API:", ressDocs)
          })

      })

  }

Answer 3

Предполагается, что вы получаете токен при успешной аутентификации.

import { AsyncStorage } from 'react-native';

fetch('https://example.dk/rest/Login/Authenticate/?businessId=1&solutionId=1', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username : this.state.username,
          password : this.state.password,
        })
      }) 

    .then((response) => AsyncStorage.setItem(LOGIN_TOKEN, response))

  .then((responseDocs) => {

    console.log("YOU HAVE SUCCSFULLY LOGGED IN:", responseDocs) 

 });}

Итак, теперь у вас есть токен, хранящийся в asyncstorage.Так, на начальном экране, например, на заставке задайте условие, чтобы проверить, представлен ли токен с помощью

AsyncStorage.getItem(LOGIN_TOKEN);