Languages
[Edit]
DE

React - einfaches An-/Abmelden

3 points
Created by:
Nikki
10460

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