Pereiti prie turinio

Klausimai apie React


Rekomenduojami pranešimai

Kol kas dar mokinuosi React. Ir turiu keletą klausimų. Backend su React bendrauja per API. Šiam momentui viskas vyksta su Basic Authentication. Ką pavyko pasidaryti, tai per Axios siunčiamas headeris su base64 užkoduotu email:password, ir backas jau grąžina kažkokią info jei prisijungimas pavyko. Kadangi naudojamas kol kas tik basic authentication, tai reiškia teks kas kart siųsti headeriuose athentication į backą, kad gauti duomenis. Klausimai, kurių kol kas normaliai neišsigooglinau:

 


  1.  
  2. Po user prisijungimo, kaip saugoti jo info (backas grąžina permission tipą ir ID). Tai reiktų saugoti permission tipą, kad pagal jį valdyti router linkus, pagal ID daryti kai kuriuos requestus, ir kažkur saugoti email+password uženkodintą su base64.
  3. Kaip atlikti logoutą? Kaip suprantu, tiesiog kažkur pakeisti state į empty stringus (permission-empty, id-empty, ir encodintas passwordas-empty)? Ir taip imituojamas logout?

Redagavo finansai
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Vartotojo duomenys turėtų būti naudojami tik prisijungimo metu. Jei prisijungimas sėkmingas, tuomet backend grąžina vartotojo tokeną (pvz. JWT). Jis sukuriamas kiekvienam prietaisui atskirai (dažniausiai, jei naudojamas kažkoks frameworkas backend'ui (pvz Laravel), tai jie jau turi paruoštus pluginus tam). React'as tą JWT išsaugo pas save (ir būtinai javascript localstorage, kad išliktų ir perkrovus puslapį). Tada kiekvieną kartą kreipiantis į backend'ą reikia perduoti tą JWT ir backend'as pagal jį ieško vartotojo ir apdoroja užklausą.

 

1. Permission tipas ir vartotojo ID gali būti naudojama atvaizdavimui, bet visos užklausos, kurioms reikia permission'ų, turėtų būti apsaugotos backend'e.

 

2. Logout'as daromas kreipiantis į backend'ą kuris ištrina token'ą pas save ir papildomai ištrinti React'e ir js localstorage token'ą, kuriuo identifikuojamaa vartotojas.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Vartotojo duomenys turėtų būti naudojami tik prisijungimo metu. Jei prisijungimas sėkmingas, tuomet backend grąžina vartotojo tokeną (pvz. JWT). Jis sukuriamas kiekvienam prietaisui atskirai (dažniausiai, jei naudojamas kažkoks frameworkas backend'ui (pvz Laravel), tai jie jau turi paruoštus pluginus tam). React'as tą JWT išsaugo pas save (ir būtinai javascript localstorage, kad išliktų ir perkrovus puslapį). Tada kiekvieną kartą kreipiantis į backend'ą reikia perduoti tą JWT ir backend'as pagal jį ieško vartotojo ir apdoroja užklausą.

 

1. Permission tipas ir vartotojo ID gali būti naudojama atvaizdavimui, bet visos užklausos, kurioms reikia permission'ų, turėtų būti apsaugotos backend'e.

 

2. Logout'as daromas kreipiantis į backend'ą kuris ištrina token'ą pas save ir papildomai ištrinti React'e ir js localstorage token'ą, kuriuo identifikuojamaa vartotojas.

Dėl JWT tokeno skaitinejau, buvau pasidaręs backe su Spring Security, bet kol kas gavau nurodymą naudoti tik basic authentication be tokeno, tai ir sprendžiu kaip tą daryti.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Dėl JWT tokeno skaitinejau, buvau pasidaręs backe su Spring Security, bet kol kas gavau nurodymą naudoti tik basic authentication be tokeno, tai ir sprendžiu kaip tą daryti.

 

 

Jei vien basic authentication, tada tiesiog vartotojo vardas ir slaptažodis (juos saugoti localstorage ir kartu su užklausa perduoti). P.S kas nurodė, jei ne paslaptis, kad reikia naudoti tik basic authenticationą?

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Jei vien basic authentication, tada tiesiog vartotojo vardas ir slaptažodis (juos saugoti localstorage ir kartu su užklausa perduoti). P.S kas nurodė, jei ne paslaptis, kad reikia naudoti tik basic authenticationą?

Čia kol kas šiame etape, toks labiau mokymosi tikslais kodinimas, bet projektui įpusėjus, gali tekti jau pajungti ir tokenus. Tik galvoju, kad gal reikia Redux naudoti, bent jau iš info kiek googlinau, kad naudinga saugant kažkokią user info.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Nuoroda į pranešimą
Dalintis kituose puslapiuose
  • po 1 mėnesio...

Lygtais ne. Sunku suprasti, nes lokaliai nera sios klaidos. Jei ir padarau run build, ir pasileidziu lokaliai builda irgi nera klaidos. Bet jei susideployna i heroku, ten jau yra sita klaida.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Lygtais ne. Sunku suprasti, nes lokaliai nera sios klaidos. Jei ir padarau run build, ir pasileidziu lokaliai builda irgi nera klaidos. Bet jei susideployna i heroku, ten jau yra sita klaida.

 

 

Įdomu kaip tu ten deployini.. Pas tave deployintas turėtų būti bundle.js failas.. Jokie .eslintrc.json nesideployina..

Nuoroda į pranešimą
Dalintis kituose puslapiuose

bitbucket-pipelines.yml:

 

image: node:12.19.0 
pipelines:
 branches:
   master:
     - step:
         name: Install App
         caches:
           - node
         script:
           - rm -rf package-lock.json
           - rm -rf node_modules
           - npm install
     - step:
          name: Create artifact
          script: 
            - git archive --format=tar.gz master -o                   app.tar.gz 
          artifacts: 
          - app.tar.gz
     - step:
          name: Deploy to heroku
          deployment: production
          caches:
            - node
          script:
            - pipe: atlassian/heroku-deploy:1.2.1
              variables:
               HEROKU_API_KEY: 'ggggg-bbbb-cccc-bbbb-aaaaa'
               HEROKU_APP_NAME: 'pavadinimas' 
               ZIP_FILE: "app.tar.gz"
               WAIT: 'true'

 

Pirmą kartą dariau, tai gali buti, kad problema su situ failu.

Redagavo finansai
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Aš su heroku nedeployinęs, bet iš eilučių 'rm -rf package-lock.json' ir '- rm -rf node_modules' nepanašu, kad tas žmogus, kuris rašė tutorial, labai gerai išmano ką daro.

 

Grubiai buildas turėtų vykti taip:

1. Parsitraukiamas tavo kodas iš repo (node_modules neturėtų būti sucommitinti, jų trinti dėl to nereikia)

2. Praleidi npm install ir surašai node_modules.

3. Praleidi testus, kodo stiliaus patikrinimus, jei tokie yra.

4. Subuildini savo projectą (dažniausiai tai būna `npm run build` komanda, priklauso nuo to, kaip pas tave aprašytas package.json).

5. Subuildintą projektą sukeli į serverį, kuris servins tavo subuildintus failus.

 

Tai spėčiau, kad tas pipe į heroku turėtų praleisti buildą ir pahostinti jį. Reiktų pasigilinti kas ten vyksta.

 

Pabandyk gal kitą tutorial pasižiūrėti.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Aš su heroku nedeployinęs, bet iš eilučių 'rm -rf package-lock.json' ir '- rm -rf node_modules' nepanašu, kad tas žmogus, kuris rašė tutorial, labai gerai išmano ką daro.

 

Grubiai buildas turėtų vykti taip:

1. Parsitraukiamas tavo kodas iš repo (node_modules neturėtų būti sucommitinti, jų trinti dėl to nereikia)

2. Praleidi npm install ir surašai node_modules.

3. Praleidi testus, kodo stiliaus patikrinimus, jei tokie yra.

4. Subuildini savo projectą (dažniausiai tai būna `npm run build` komanda, priklauso nuo to, kaip pas tave aprašytas package.json).

5. Subuildintą projektą sukeli į serverį, kuris servins tavo subuildintus failus.

 

Tai spėčiau, kad tas pipe į heroku turėtų praleisti buildą ir pahostinti jį. Reiktų pasigilinti kas ten vyksta.

 

Pabandyk gal kitą tutorial pasižiūrėti.

Dekui! Panasiai ir masciau, nes realiai cia kaip ir nevyksta buildas, o kaip suprantu archivinamas repo. Nes lieka eslint, pretier, ko neturetu buti build'e. Bandysiu perdaryti, nes ant Vercel.com viskas graziai susibuildina, o ant heroku neteisingai, tai reiskia bloga bitbucket-pipelines.yml konfiguracija.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Gal kas galite pasidalinti rekomendacijom apie initial/default stylinimo settingsus, kuriant React web su Material UI. Esme, kad sukuriant nauja React projekta, buna defaultiniai index.css ir App.css As noriu viska stylinti su Material UI makeStyles. Viskas kaip ir gerai, bet kartais, buna kad atsiranda margin ant AppBar, nors reenderinant kitus komponentus, dingsta ir pan. Tai radau, viena .css default kodo gabala, kuris ale pritaiko initial nustatymus, kad to isvengti. Bet tada neradau tikslaus pvz., kaip footeri susitvarkyti, kad visada butu apacioje. Vienintelis ka padariau, tai i pagrindini div isidejau komponentus:

<Header />

<Main />

<Footer />

Ir padariau kad main aukstis minHeight butu 100vh. Bet itariu, kad cia nera gal teisingas sprendimas. O daugelis tutorialu apie atskirus komponentus, bet kaip pati pagrinda Material UI web ant React pradeti, kaip ir neuzmaciau.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Vartotojo duomenys turėtų būti naudojami tik prisijungimo metu. Jei prisijungimas sėkmingas, tuomet backend grąžina vartotojo tokeną (pvz. JWT). Jis sukuriamas kiekvienam prietaisui atskirai (dažniausiai, jei naudojamas kažkoks frameworkas backend'ui (pvz Laravel), tai jie jau turi paruoštus pluginus tam). React'as tą JWT išsaugo pas save (ir būtinai javascript localstorage, kad išliktų ir perkrovus puslapį). Tada kiekvieną kartą kreipiantis į backend'ą reikia perduoti tą JWT ir backend'as pagal jį ieško vartotojo ir apdoroja užklausą.

 

1. Permission tipas ir vartotojo ID gali būti naudojama atvaizdavimui, bet visos užklausos, kurioms reikia permission'ų, turėtų būti apsaugotos backend'e.

 

2. Logout'as daromas kreipiantis į backend'ą kuris ištrina token'ą pas save ir papildomai ištrinti React'e ir js localstorage token'ą, kuriuo identifikuojamaa vartotojas.

Nors pats renkuosi localstorage, JWT taip pat galima saugoti cookies, kokiam redux persisted storage, jei graphql, tai cache.

Jei darai simple auth eksperimentą, šitai nėra taip svarbu, tačiau dažniausiai yra naudojami du tokenai: auth ir refresh. Auth naudojamas darant API requestus, jeigu auth tokenas failina (dažniausiai turi expiration laiką), tada daromas requestas prašant naujo auth tokeno headeryje prikabinant refresh tokeną. https://stackoverflow.com/questions/38986005/what-is-the-purpose-of-a-refresh-token

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Nors pats renkuosi localstorage, JWT taip pat galima saugoti cookies, kokiam redux persisted storage, jei graphql, tai cache.

Jei darai simple auth eksperimentą, šitai nėra taip svarbu, tačiau dažniausiai yra naudojami du tokenai: auth ir refresh. Auth naudojamas darant API requestus, jeigu auth tokenas failina (dažniausiai turi expiration laiką), tada daromas requestas prašant naujo auth tokeno headeryje prikabinant refresh tokeną. https://stackoverflow.com/questions/38986005/what-is-the-purpose-of-a-refresh-token

Dėkui už info. Dabar darau kaip tik web varianta, kur tokena saugosiu localstorage. Tik kilo klausimas. Ar is backo pasiduoti json kur butu tokenas bei papildomai userio info (ID, role) ar paduoti is backo tik tokena, o user info pasiimti is tokeno payload?

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Dėkui už info. Dabar darau kaip tik web varianta, kur tokena saugosiu localstorage. Tik kilo klausimas. Ar is backo pasiduoti json kur butu tokenas bei papildomai userio info (ID, role) ar paduoti is backo tik tokena, o user info pasiimti is tokeno payload?

Gali dėti į vieną auth endpointą. O tą userio info irgi nori dėti į localstorage?

 

Namų darbų: https://en.wikipedia.org/wiki/Separation_of_concerns

 

edit: užbėgsiu už akių, ir jeigu tavo atsakymas, kad nori dėti ta info į localstorage, tai: https://stackoverflow.com/questions/10322389/how-to-deal-with-localstorage-for-multiple-users/10322740#10322740

Redagavo KillaBee
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Gali dėti į vieną auth endpointą. O tą userio info irgi nori dėti į localstorage?

 

Namų darbų: https://en.wikipedia.org/wiki/Separation_of_concerns

 

edit: užbėgsiu už akių, ir jeigu tavo atsakymas, kad nori dėti ta info į localstorage, tai: https://stackoverflow.com/questions/10322389/how-to-deal-with-localstorage-for-multiple-users/10322740#10322740

Role ir ID nera gal sensitive info.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Siulyčiau vis tiek nedėti nes reikės anyway validuoti ar info teisinga. https://stackoverflow.com/a/18128078

Taip, del ID manau tikrai nereikia, nes chekinsiu backe is security contexto pasiimdamas info. Kaip geriausia tada daryti su protected routes? Jei yra kelios roles. Vienas is variantu, tuomet su tokenu pasiduoti tik role. Ja laikyti reduxo pagalba (ko gero gal teisingiausia, tiesa apie redux minimaliai dar turiu ziniu) ir tada i routu propsus pasiduodu role, ir jei ji atitinka, rodo ta route.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Taip, del ID manau tikrai nereikia, nes chekinsiu backe is security contexto pasiimdamas info. Kaip geriausia tada daryti su protected routes? Jei yra kelios roles. Vienas is variantu, tuomet su tokenu pasiduoti tik role. Ja laikyti reduxo pagalba (ko gero gal teisingiausia, tiesa apie redux minimaliai dar turiu ziniu) ir tada i routu propsus pasiduodu role, ir jei ji atitinka, rodo ta route.

Manau, gerai sugalvojai. Atsimink, kad gali būti scenarijus pvz.: user'is turėjo kokią nors moderatoriaus role, jį demotini, tačiau pas jį vis dar lokaliai yra sena role. Reikės šitą atsiminti. Dėl pačio componento struktūros, tai gali pačiame routerio faile pasiimt iš selectoriaus userio rolę ir nereikės passint per propsus. Taip pat gali įdėt redux store persistorių, kad kitą kartą atėjus nedingtų rolė.

Beje, čia webinis appsas ar react native?

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Manau, gerai sugalvojai. Atsimink, kad gali būti scenarijus pvz.: user'is turėjo kokią nors moderatoriaus role, jį demotini, tačiau pas jį vis dar lokaliai yra sena role. Reikės šitą atsiminti. Dėl pačio componento struktūros, tai gali pačiame routerio faile pasiimt iš selectoriaus userio rolę ir nereikės passint per propsus. Taip pat gali įdėt redux store persistorių, kad kitą kartą atėjus nedingtų rolė.

Beje, čia webinis appsas ar react native?

Cia webinis. Pusiau realus projektas, pusiau mokomasis :) Nes iki siol mokinausi Java, bet dabar prireike ir fronta pasijungti.

 

Tirsa ziurejau apie Context Api kur prieš tainkitas narys rrkomendavo. Tai kiek pasidomejau, visai tinkamas variantas laikyti rolei. Is tokeno issiparsinu role, ir Context Api pasiduodu. O is contexto galiu pasiimti bet kur.

Redagavo finansai
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Cia webinis. Pusiau realus projektas, pusiau mokomasis :) Nes iki siol mokinausi Java, bet dabar prireike ir fronta pasijungti.

 

Tirsa ziurejau apie Context Api kur prieš tainkitas narys rrkomendavo. Tai kiek pasidomejau, visai tinkamas variantas laikyti rolei. Is tokeno issiparsinu role, ir Context Api pasiduodu. O is contexto galiu pasiimti bet kur.

Jei naudosi redux'ą, tai tiesiog redux store naudok, turėtų būti patogiau

Nuoroda į pranešimą
Dalintis kituose puslapiuose
  • po 2 savaičių...

Jei naudosi redux'ą, tai tiesiog redux store naudok, turėtų būti patogiau

Kaip teisingai reiktu iskelti uzklausa su axios kaip atskira servisa, kad visko nelaikyti viename komponente. Tarkim yra tokia kodo dalis:

 

function Posts() {
   const classes = useStyles();
   const [posts, setPosts] = useState([]);

   const fetchPosts = () => {
       axiosInstance.get('/public/posts').then((res) => {
           setPosts(res.data.content);
       });
   };

useEffect(() => {
       fetchPosts();
   }, []);
...//toliau eina kodas

 

Dabar uzkrovus komponenta atlieka uzklausa, uzsetina, ir prasuka jsona su map ir taip atvaizduoja kiekviena elementa. Noreciau tureti atskirame servise uzklausa i axios. Tik nezinau ar reikia atskirai iskelti viena fetchPosts, ir returna tiesiog importuotis is serviso, ar ten reikia kelti ir settinimo logika ir useEffect?

Redagavo finansai
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Kaip teisingai reiktu iskelti uzklausa su axios kaip atskira servisa, kad visko nelaikyti viename komponente. Tarkim yra tokia kodo dalis:

 

function Posts() {
   const classes = useStyles();
   const [posts, setPosts] = useState([]);

   const fetchPosts = () => {
       axiosInstance.get('/public/posts').then((res) => {
           setPosts(res.data.content);
       });
   };

useEffect(() => {
       fetchPosts();
   }, []);
...//toliau eina kodas

 

Dabar uzkrovus komponenta atlieka uzklausa, uzsetina, ir prasuka jsona su map ir taip atvaizduoja kiekviena elementa. Noreciau tureti atskirame servise uzklausa i axios. Tik nezinau ar reikia atskirai iskelti viena fetchPosts, ir returna tiesiog importuotis is serviso, ar ten reikia kelti ir settinimo logika ir useEffect?

 

Manau, šitai puikiai atsako į tavo klausimą

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...