Перенаправление на экран входа в систему для пользователя, не прошедшего проверку подлинности (реактивная-реакция, навигационная-реакция, реактивная-избыточность) - PullRequest
Новая
       8

Перенаправление на экран входа в систему для пользователя, не прошедшего проверку подлинности (реактивная-реакция, навигационная-реакция, реактивная-избыточность)

0 голосов
/ 02 июня 2019

Мое приложение реагирует на родство, и пользователи могут использовать его без входа в систему, но для некоторых экранов требуется, чтобы пользователь вошел в систему для доступа.Я использую реагирующую навигацию, и когда неаутентифицированный пользователь переходит на один из этих экранов, я хочу перенаправить на экран входа в систему.

В настоящее время экран просто отображается по-другому для пользователя, вышедшего из системы,но в идеале он не будет отображаться вообще (просто перенаправление): 

import { connect } from 'react-redux';

import ProfileScreen from './ProfileScreen';

const mapStateToProps = (state) => {
  const { currentUser } = state;

  return {
    currentUser,
  };
};

export default connect(mapStateToProps)(ProfileScreen);


// ProfileScreen.js
import React from 'react';
import { Text } from 'react-native';

const ProfileScreen = (props) => {
  if (props.currentUser == null) {
    return <Text>You are not logged in</Text>;
  }

  return <Text>Your Profile</Text>;
};

export default ProfileScreen;

Где находится правильное место для перенаправления?Я также использую избыточность, поэтому я видел предложения поместить ее в componentDidMount контейнера или где-нибудь в цепочке избыточности.

1 Ответ

0 голосов
/ 02 июня 2019

Да, вы должны проверить в методе ProfileScreen компонента componentDidUpdate вашего компонента, чтобы определить, есть ли в вашем хранилище currentUser.

Когда пользователь вышел из системы, просто перезагрузитесостояние навигации до Login экрана.В компонентах componentDidUpdate, 

componentDidUpdate(prevProps){
   if(!this.props.currentUser){
      const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Login' })],
       });
      this.props.navigation.dispatch(resetAction);
  }
}

Это сбросит состояние навигации и перейдет к экрану Login.

PS.Если ваш Login экран находится в другом стеке, добавьте prop key:null в параметрах resetAction.Это сбросит навигатор основного приложения, а затем перейдет к экрану Login.

...