Како истрајати пријављеног корисника у реакцији

Ако покренете брзу Гоогле претрагу трајног пријављеног корисника у Реацт-у (или задржавања корисника пријављеног у Реацт-у), нећете добити пуно директних резултата. Нема баш једноставних примера како то постићи. Тако сам закључио да морам да напишем тај једноставан водич.

Можда сте ово претражили и видели како се реч лоцалСтораге баца около. Да, користићемо лоцалСтораге, али показаћу вам тачно како се то ради.

Неке белешке о лоцалСтораге.

  1. лоцалСтораге је база података прегледача. Подаци се чувају у прегледачу у меморији рачунара.
  2. лоцалСтораге је специфичан за порекло. Другим речима, локалном Складишту једне веб локације не може приступити други.

Почетно подешавање

Хајде да почнемо. Применио сам једноставан експресни сервер на Хероку за употребу у тестирању ове апликације.

  1. Направите нову Реацт апликацију и крените у компоненту.
  2. Инсталирајте акиос помоћу npm install axiosи увезите га унутра
  3. Затим створите једноставан образац за пријаву који прихвата корисничко име и лозинку.
import React, { useState } from "react"; import axios from "axios"; const App = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [user, setUser] = useState() const handleSubmit = async e => { }; // if there's a user show the message below if (user) { return {user.name} is loggged in ; } // if there's no user, show the login form return (  Username:   setUsername(target.value)} /> password:   setPassword(target.value)} /> Login  ); }; export default App; 

Као што видите, дефинисали смо асинхрону функцију хандлеСубмит за обраду захтева за пријаву. Такође смо дефинисали услов који приказује корисничко име. Порука је пријављена ако имамо корисника и образац за пријаву ако немамо корисника.

Даље, довршимо функцију. Ова функција ће радити у следећим корацима:

  1. Пошаљите податке за пријаву на сервер.
  2. Ако је захтев успешан (асинц-аваит), сачувајте податке о кориснику у лоцалСтораге и подесите стање корисника.

Руковати догађајем пријаве

Дефинишемо хандлеСубмит обрађивач догађаја.

const handleSubmit = async e => { e.preventDefault(); const user = { username, password }; // send the username and password to the server const response = await axios.post( "//blogservice.herokuapp.com/api/login", user ); // set the state of the user setUser(response.data) // store the user in localStorage localStorage.setItem('user', response.data) console.log(response.data) }; 

Напомена: Користите триЦатцх блок за руковање грешкама у функцијама асинхронизације .

Сада када је наша функција завршена, можете да покренете нпм старт да бисте тестирали своју апликацију. Пријавите се корисничким именом : усер2, лозинком : лозинком.

Као одговор бисте требали добити следеће. УсерИд , знак и корисничко име

Проверите да ли се корисник претходно пријавио

Даље, желимо начин да проверимо да ли је корисник пријављен сваки пут када се апликација учита. За то користимо усеЕффецт куку.

 useEffect(() => { const loggedInUser = localStorage.getItem("user"); if (loggedInUser) { const foundUser = JSON.parse(loggedInUser); setUser(foundUser); } }, []); 

Не заборавите да користите празан низ зависности у усеЕффецт куки тако да провери да ли је пријављени корисник први пут када се апликација учита.

Сада би наша апликација требало да ради савршено. Доленаведену страницу добијамо након што се корисник први пут пријави и њихови подаци се чувају. Ако освежите страницу, видећете да наш корисник остаје пријављен, а пријављена страница се и даље приказује.

Као бонус савет, ево начина примене одјаве.

Имплементација функције одјаве

За одјаву једноставно испразнимо стање корисника и уклонимо корисника из лоцалСтораге.

Применимо то.

Прво креирамо дугме за одјаву

logout 

Затим креирамо функцију одјаве.

const handleLogout = () => { setUser({}); setUsername(""); setPassword(""); localStorage.clear(); }; 

И то је то, готови смо.

Ево везе до целокупне суштине на ГитХуб-у. Можете ме пратити тамо за још новости.