Languages
[Edit]
PL

React - proste logowanie / wylogowanie

3 points
Created by:
Kevin
677

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

Alternative titles

  1. React - prosta usługa logowania / wylogowania
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 (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