Languages
[Edit]
DE

React - einfaches An-/Abmelden

3 points
Created by:
Nikki
9950

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);

ReactJS (DE)

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join