Lekce 23 - Databázový klient v React - Autorizace a dokončení klienta

V minulé lekci, Databázový klient v React - Komponenta přihlašovací stránky, jsme si vytvořili přihlašovací stránku, na které jsme se přihlásili za nově registrovaného uživatele.

V dnešním React tutoriálu si ukážeme, jak zobrazovat různý obsah v komponentách podle toho, zda je uživatel přihlášený a má určité oprávnění. V případně nedostatečných oprávnění uživatele přesměrujeme pryč.

Filmy

Začneme s filmy.

Komponenta MovieTable

V komponentě MovieTable v souboru src/movies/MovieTable.js vždy zobrazujeme tlačítka na úpravu nebo smazání existujícího filmu nebo na vytvoření nového. Tato tlačítka nyní chceme zobrazit jen administrátorům, protože ti jsou jediní, kdo může tyto úpravy provádět.

Začneme přidáním importu:

import { useSession } from "../contexts/session";

Dále v komponentě využijeme náš připravený hook useSession(). Rovnou si pomocí něj vytvoříme i pomocnou proměnnou, zda je uživatel administrátor:

const {session} = useSession();
const isAdmin = session.data?.isAdmin === true;

Pokud jste ještě nepotkali operátor ?., tak ten zajistí, že kód nezpůsobí chybu, kdyby na objektu session nebyla vlastnost data. To se může stát, když uživatel není přihlášený a tím pádem žádná data nemá. Delší verze kódu by šla napsat pomocí jednoduché podmínky if.

Pomocnou proměnnou pak využijeme při vykreslování zmíněných tlačítek. Celé vykreslení tlačítek u každého filmu pak vypadá takto:

...konec náhledu článku...
Pokračuj dál