Languages
[Edit]
DE

React - einfaches An-/Abmelden

3 points
Created by:
Nikki
10520

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);
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

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