React - einfaches An-/Abmelden

In diesem Artikel wird gezeigt, wie man einen einfachen An-/Abmelden-Dienst in React erstellen kann. 

Im folgenden Beispiel wird ein Objekt AuthenticationContext erstellt, das die gemeinsame Nutzung des Kontexts durch untergeordnete Komponenten ermöglicht. Mit Kontext kann man einige Informationen zwischen Komponenten austauschen, ohne Eigenschaften zu verwenden - alle untergeordneten Komponenten haben Zugriff auf den Kontext der übergeordneten Komponente.  

Mit AuthenticationContext.Provider kann man das authenticationService-Objekt für alle untergeordneten Komponente verfügbar machen. Um in jeder untergeordneten Komponente auf authenticationService zuzugreifen, ruft man useContext(AuthenticationContext) aus.

• Die UserMenu-Funktionskomponente ist die erste Komponente, die in der App initialisierten AuthenticationContext verwendet. Mit den Schaltflächen und den ihnen zugeordneten onClick-Methoden kann man den Benutzer an- oder abmelden, indem AuthenticationContext aktualisiert wird. 
• Die SiteNavbar-Komponente ist die zweite Komponente, die AuthenticationContext verwendet. Es zeigt den Benutzer mit der Methode getUser() von dem authenticationService an und rendert die UserMenu-Komponente.
• Die Bentutzerdaten werden im Zustand der App-Komponente gespeichert, so dass bei einer Änderung der Daten ein Neudarstellen aller Komponenten erfolgt.

// ONLINE-RUNNER:browser;

//import React from 'react';
//import ReactDOM from 'react-dom';

const AuthenticationContext = React.createContext();

const UserMenu = () => {
  const authenticationService = React.useContext(AuthenticationContext);
  const handleLoginClick = () => authenticationService.loginUser('Jack');
  const handleLogoutClick = () => authenticationService.logoutUser();
  return (
    <>
      <button onClick={handleLoginClick}>Anmelden: Jack</button>
      <button onClick={handleLogoutClick}>Abmelden: Jack</button>
      </>
  );
};

const SiteNavbar = () => {
  const authenticationService = React.useContext(AuthenticationContext);
  return (
    <div>
      <span>{authenticationService.getUser()}</span>
      <UserMenu />
    </div>
  );
};

const App = () => {
  const [user, setUser] = React.useState(null);
  const authenticationService = {
    getUser: () => user,
    loginUser: (user) => {
      //TODO: setUser durch AJAX-Anfragen an den Server ersetzen
      setUser(user);
      return true;
    },
    logoutUser: () => {
      //TODO: setUser durch AJAX-Anfragen an den Server ersetzen
      setUser(null);
      return true;
    }
    // andere Methoden...
  };
  return (
    <AuthenticationContext.Provider value={authenticationService}>
      <SiteNavbar />
    </AuthenticationContext.Provider>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);