如何使用Firebase和react-router v4改善我的身份验证流程构建？

Question

我在React应用程序中设置了Firebase身份验证，我的代码可以运行，但是我认为在性能和安全性方面我没有使用最佳方法。我来找你解决我该如何解决这个问题，我听说过redux，并想知道它是否可以帮助我朝这个方向发展？

        // App.js

        class App extends Component {
          componentDidMount() {
            this.authListener();
          }

          authListener = () => {
            firebase.auth().onAuthStateChanged((user) => {
              if (user) {
                sessionStorage.setItem('isAuth', true);
                sessionStorage.setItem('userEmail', user.email)
              } else {
                sessionStorage.removeItem('isAuth');
                sessionStorage.removeItem('userEmail');
              }
            });
          };

          render() {
            return (
              <Router>
                <ScrollToTop>
                  <Route exact path="/" component={Accueil} />
                  <Route path="/inscription" component={Inscription} />
                  <Route path="/connexion" component={Connexion} />
                  <Route path="/mot-de-passe" component={Motdepasse} />
                  <PrivateRoute path="/abonnement" component={Subscription} />
                  <PrivateRoute path="/vip" component={Vip} />
                </ScrollToTop>
              </Router>
            );
          }
        }

        export default App;

        //Connexion.js

        class Connexion extends Component {
          state = {
            email: '',
            password: '',
            errorMessage: null,
            redirect: false
          }

          handleSignIn = (e) => {
            e.preventDefault();
            firebase
              .auth()
              .signInWithEmailAndPassword(this.state.email, this.state.password)
              .then(() => sessionStorage.setItem('isAuth', true))
              .then(() => sessionStorage.setItem('userEmail', firebase.auth().currentUser.email))
              .then(() => this.setState({ redirect: true }))
              .catch(error => this.setState({
                errorMessage: error.message
              }));
          }

          render() {
            if (this.state.redirect === true) { 
              return <Redirect to='abonnement' />
            } else {
              return(
              // Form
              );
            }
        }

        export default Connexion;