[Edit]

React - proste logowanie / wylogowanie

1 contributors

2 contributions

0 discussions

3 points

Created by:

Kevin

797

W tym artykule chcielibyśmy pokazać, jak stworzyć prostą usługę logowania/wylogowania w React.

W poniższym przykładzie tworzymy obiekt AuthenticationContext, który pozwala nam dzielić kontekst między komponentami potomnymi. Kontekst pozwala nam dzielić się pewnymi informacjami między komponentami bez konieczności używania właściwośći - wszystkie komponenty potomne mają dostęp do kontekstu rodzica.

Używając AuthenticationContext.Provider możemy udostępnić wszystkim dzieciom obiekt authenticationService. Aby mieć dostęp do authenticationService w każdym z komponentów potomnych, należy wywołać useContext(AuthenticationContext).

Komponent funkcyjny UserMenu to pierwszy komponent, który używa naszego AuthenticationContext zainicjowanego w App. Za pomocą przycisków i przypisanym im metod onClick możemy zalogować lub wylogować naszego użytkownika poprzez aktualizację AuthenticationContext.
Komponent SiteNavbar jest drugim komponentem, który używa AuthenticationContext.
Wyświetla on naszego użytkownika używając metody getUser() z naszego authenticationService i renderuje komponent UserMenu.
Dane użytkownika są przechowywane w stanie komponentu App, dzięki temu w przypadku zmiany danych wystąpi ponowne renderowanie wszystkich komponentów.

xxxxxxxxxx
 
//import React from 'react';
//import ReactDOM from 'react-dom';
​
const AuthenticationContext = React.createContext();
​
const UserMenu = () => {
  const authenticationService = React.useContext(AuthenticationContext);
  const handleLoginClick = () => authenticationService.loginUser('Jacek');
  const handleLogoutClick = () => authenticationService.logoutUser();
  return (
    <>
      <button onClick={handleLoginClick}>Zaloguj: Jacek</button>
      <button onClick={handleLogoutClick}>Wyloguj: Jacek</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: Zastąp setUser zapytaniami AJAX do serwera
      setUser(user);
      return true;
    },
    logoutUser: () => {
      //TODO: Zastąp setUser zapytaniami AJAX do serwera
      setUser(null);
      return true;
    }
    // inne metody...
  };
  return (
    <AuthenticationContext.Provider value={authenticationService}>
      <SiteNavbar />
    </AuthenticationContext.Provider>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);