Languages
[Edit]
PL

React - proste logowanie / wylogowanie

3 points
Created by:
Dirask JS Member
3640

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.
// 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('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);

ReactJS (PL)

React - proste logowanie / wylogowanie
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