Am început să folosesc recent ReactJs și mă declar foarte mulțumit de el. Combinat cu o librărie de stil precum material-ui devine o unealtă foarte bună de a pune pe picioare un front-end.
Bazele le-am înțeles, am construit un ui folosind routare cu react-router-dom dar acum aș vrea și un mecanism de login. Doresc să ascund conținutul utilizatorilor nelogați iar cei ce sunt logați să poată avea conținut propriu.
Se poate face acest lucru și fără Redux? Nu știu prea multe despre el, dar am auzit că este complicat. Am aflat în schimb despre JWT (json web tokens) și pare că pot folosi fără Redux utilizând un server node.
Aveți ceva sfaturi/recomandări până nu imi formez un bias?
Ce folosești pe backend ? Problema nu e cu react, e cu backend-ul. Practic tu setezi o sesiune cu token-ul și după în funcție de ea ceri un JSON pe rutări. (mai mult ca sigur cu un provider, adică o componentă care îți bagă un props în toate componentele cu userul)
Dacă ai graphql cea mai simplă opțiune ar fi apollo-graphql. (plus poți folosi și apollo-link-state ca să nu te complici cu setState și inheritance-ul enervant la children)
Poți folosi și backend-uri headless gen wordpress, https://prismic.io. Eventual te bazezi pe Firebase. (probabil cea mai bună soluție dacă nu vrei să te distrezi cu backend-ul)
Recomand folosirea Redux, dupa ce am facut cateva proiecte cu React personal mi se pare cea mai utila componenta din tot stack-ul comparativ cu partea de react (a.k.a. view). Poti face integrarea cu react-router si pachetele react-router-redux astfel incat ai in store toate schimbarile de ruta si multe alte beneficii.
Legat de JWT vs server node vs Redux nu prea am inteles legatura. De obicei se foloseste un server node pentru a servi resursele statice si pentru partea de API proxy-ing iar pentru partea de auth poti folosi ce doresti.
JWT personal nu recomand daca nu ai nevoie, poate fi destul de mare ca marime si faci trafic aiurea mai ales daca pe partea de server ai ceva standard implementat gen session id.
Daca ai timp extra recomand sa te familiarizezi cu flow sau typescript pentru typings in JS.
Înseamnă că din viziunea mea lipsește o piesă de puzzle. Am react deja pe frontend, momentan cu informații hardcoded. Backend încă nu există, dar probabil va sta acolo o bază de date MySql sau MongoDb.
Cine m-am delegat sa fac partea cu auth a spus că trebuie ceva pe baza de node și poate cu acel JWT.
React + React Router + Firebase?
De ceva timp @isti37 mi-a trimis un video tutorial ( https://youtu.be/UVQ0ATR0vpI) la o întrebare despre React Router, aici pe forum . Cred că video ul te ajută cu câteva explicații la ce ai tu nevoie.
Vorbesc din experienta, dar s-ar putea sa nu am adevarul suprem aici. Take it with a grain of salt.
Flow-ul de login/auth/logout o sa implice mai mult ca sigur niste redirect-uri. Login-urile sociale asa merg. Deci din start trebuie sa suporti flow-ul asta. Daca faci doar user+password [1] poti sa faci si printr-un API call, dar eu zic ca e inca un good practice sa faci si aici un redirect si un page load classic HTTP.
Asadar, problema se simplifica oarecum. Pentru ca daca incarci o pagina, fie esti logat si ai niste informatie de sesiune autentificata, fie nu esti logat si nu ai informatia asta. Nimic din ce poate face SPA-ul nu poate schimba treaba asta - e ceva ce se intampla la nivelul de flow standard HTTP, reincarcari pagina etc. Pe langa un cookie de sesiune care e atasat la fiecare page request si API call automat de browser, si care se intampla inafara controlului SPA-ului, eu embeduiesc informatia de sesiune ca o variabila globala in pagina/codul js generat de catre server. Asa ca nu e accesata via Redux sau asa, ci ca o banala variabila globala (bine e si un modul alcolo care face extragerea ca sa fie totul ES6/7, dar pana la urma tot aia e).
O sa ai niste routes pentru care trebuie sa fi logat - mai precis pentru care trebuie sa ai informatia de sesiune corecta. Eu astea le wrap-uiesc intr-o ruta care verifica daca exista informatia asta. Daca exista, plaseaza restul componentelor in pagina. Daca nu exista, afiseaza un screen de logare, care determina seria de redirect-uri si actiuni server-side, la finalul carora ajungi la pagina dorita, dar cu toate informatiile de sesiune prezente.
E un pic mai convoluted cum descriu, dar mi-a simplificat mult design-ul sa tratez “sesiunea” inafara partii SPA si sa nu trebuiasca sa am grija ei cum ar venii.
Am urmarit asta, o introducere in React+GraphQl+Apollo.
Până acum am înțeles cum se poate lega frontend de backend, înțeleg ce zice și Horia despre flow. Am să urmăresc și recomandarea lui Costi și poate am să găsesc ceva și despre sesiuni (ce este, cum o controlez etc).