Реагировать на шаблон аутентификации маршрутизатора

Question

Я пытаюсь реализовать аутентификацию с использованием React + Firebase.Я хочу добиться простого результата.Когда пользователь не вошел в систему, он видит «Welcome» в компоненте Welcome по пути «/».Когда пользователь входит в систему, он видит «Добро пожаловать, username».Я реализовал Login как контролируемый компонент, который имеет некоторые поля (имя, адрес электронной почты) и метод входа.То же самое с компонентом «Регистрация».Я не могу понять, как лучше реализовать компонент Welcome, который может получать реквизиты.Я попытался передать реквизиты для компонента Welcome, но затем он имеет форму, и это не может быть передано в компонент компонента Route, таким образом, у меня есть ошибка.Я также видел решение с защищенными путями, но мне не нужны точно защищенные пути от не прошедших проверку пользователей.Я просто хочу передать данные пользователя из Login (firebase.auth (). CurrentUser) в компонент Welcome.Не могли бы вы предложить лучший, современный или элегантный способ реализации такого потока?

import React, {Component} from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Welcome from './Welcome';
import Login from './Login';
import Signup from './Signup';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Welcome} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Signup} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Answer 1

Я привык использовать React Context API для управления состоянием аутентификации.Лучший учебник, который я видел по этому поводу, - https://medium.freecodecamp.org/how-to-protect-your-routes-with-react-context-717670c4713a.В то время как есть более простые решения, это довольно масштабируемое и поддерживающее большую гибкость.

Answer 2

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

(псевдокод)

if: no user data
return (<p>Welcome</p>);

if: user data exists
return (<p>Welcome John Smith</p>);