Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
AbonnerSkjul
Host1.no - Webhotell fra 29,-, virtuell server fra 249,-. 15% rabatt med rabattkode "nFF". Besøk oss på Host1.no!
  12 6829
Quiztneffer
71 2
30. mars 2021
Etter å ha testet flask med mysql og lage en innloggingsside til en webapp, fant jeg det til at Reactjs var bedre å bruke til frontend.
Fulgte en guide på github: https://github.com/ArjunAranetaCodes...ysql-login-reg og jeg gjetter meg til at mitt oppsett i mysql er problemet i min innloggingsside.
Error jeg får er (fra react):

Kode

Profile.componentDidMount
src/components/Profile.js:19
  16 | const token = localStorage.usertoken
  17 | const decoded = jwt_decode(token)
  18 | this.setState({
> 19 |   first_name: decoded.identity.first_name,
  20 |   last_name: decoded.identity.last_name,
  21 |   email: decoded.identity.email
  22 | })

Kode

 componentDidMount() {
    const token = localStorage.usertoken
    const decoded = jwt_decode(token)
    this.setState({
      first_name: decoded.identity.first_name,
      last_name: decoded.identity.last_name,
      email: decoded.identity.email
    })
  }
Mitt oppsett i MYSQL - er at jeg har satt opp kolonnene som varchar, dette da ikke 'text' eller jSon fungerer, men jeg kan se for meg at jeg har gjort en feil her.
Noen som er flinke på slik Mysql/jwt/flask trøbbel?
etse
Ukjent
Donor
6.181 4.151
30. mars 2021
Vi trenger litt mer kotekst for å kunne hjelpe her. Ser ikke ut som du har tatt med hele feilmeldingen fra react - bare hvor den sier det er feil. Men hva er den faktiske feilmeldingen?
Quiztneffer
Trådstarter
71 2
30. mars 2021
Ja, skal vi se her - hjelper dette @etse :
TypeError: Cannot read property 'first_name' of undefined
Profile.componentDidMount
http://193.69.47.200:3000/static/js/bundle.js:52678:38
etse
Ukjent
Donor
6.181 4.151
30. mars 2021
Det hjalp litt mer. Den feilmeldingen er nok forklaringen på problemet.
På mer norsk sier denne feilmeldingen: "Du kan ikke hente ut firs_name fordi identity er udefinert". Altså når du kjører linjen

Kode

const decoded = jwt_decode(token)
Så returnerer denne et objekt hvor decoded.identity er udefinert. Altså er det trolig noe feil med tokenet.

Prøv å skriv ut hva ting er i konsollen og se om ting ser rett ut. Misstenker at tokenet ditt mangler noen verdier du ønsker Altså noe som:

Kode

     componentDidMount() {
        const token = localStorage.usertoken
        console.log("Token is:", token);

        const decoded = jwt_decode(token)
        console.log("Decoded token is:", decoded);

        this.setState({
          first_name: decoded.identity.first_name,
          last_name: decoded.identity.last_name,
          email: decoded.identity.email
        })
      }
Misstanken min er at når du laget tokenet så la du ikke på disse verdiene på riktig måte.
Sist endret av etse; 30. mars 2021 kl. 13:08.
Quiztneffer
Trådstarter
71 2
30. mars 2021
Oioi, her kom det et godt forklar svar @etse - tusen takk! Du skriver «lager tokenet» mener du at det er noe jeg skulle laget, eller programmet? Om så sistnevnte er rett, kan dette være grunnet at jeg har feil oppsett i mysql? Altså at de fem -5- columns for first-, last_name, email, passord og created er feil? Det er årevis siden jeg lekte med databaser, men begynner å få sansen for kommunikasjonen med flask, og react - så takk for svar!
Matheves
40 36
30. mars 2021
Sitat av Quiztneffer Vis innlegg
Oioi, her kom det et godt forklar svar @etse - tusen takk! Du skriver «lager tokenet» mener du at det er noe jeg skulle laget, eller programmet? Om så sistnevnte er rett, kan dette være grunnet at jeg har feil oppsett i mysql? Altså at de fem -5- columns for first-, last_name, email, passord og created er feil? Det er årevis siden jeg lekte med databaser, men begynner å få sansen for kommunikasjonen med flask, og react - så takk for svar!
Vis hele sitatet...
Jeg har ikke så mye peiling på sånt jeg heller, men jeg forstod ham slik at:

Kode

const decoded = jwt_decode(token)
Denne linja gjør at variabelen som heter "decoded" går gjennom funksjonen jwt_decode. jwt_decode henter frem variabelen "token".

Det han sier er at variabelen "token" kanskje ikke er satt fra før, eller at det er noe feil med innholdet i variabelen.

Sjekk i koden din når variabelen "token" blir satt. Det er der tokenet blir laget.

Slik jeg oppfatter det, er det her tokenet blir laget:

Kode

const token = localStorage.usertoken
Så det betyr at det kan være variabelen localStorage.usertoken som har en feil i seg. Prøv å printe den ut og se hva den er satt til å være.

Det vil si at jeg ber deg om å gjøre dette:

Kode

     componentDidMount() {
        const token = localStorage.usertoken
        console.log("Token variable:", localStorage.usertoken);
        console.log("Token is:", token);
 
        const decoded = jwt_decode(token)
        console.log("Decoded token is:", decoded);
 
        this.setState({
          first_name: decoded.identity.first_name,
          last_name: decoded.identity.last_name,
          email: decoded.identity.email
        })
      }
Denne vil printe ut i konsollen og fortelle deg hva localStorage.usertoken, token og decoded er satt til å være.

Jeg har en magefølelse av at localStorage.usertoken er tom, altså ikke inneholder noe som helst.
Sist endret av Matheves; 30. mars 2021 kl. 14:50.
Quiztneffer
Trådstarter
71 2
30. mars 2021
Takk, for svar @Matheves - jeg skal gå gjennom koden og sjå. Her har jeg kanskje latt noe gå meg forbi av variabler jeg selv skal endre.

HTML-kode

[code][/code]
Jeg skal prøve hva du sier, men jeg åpnet nå "console" og her er en mer detaljert feilkode:

Kode

Profile.js:19 Uncaught TypeError: Cannot read property 'first_name' of undefined
    at Profile.componentDidMount (Profile.js:19)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at Router../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at Router.js:70
    at listener (history.js:155)
    at history.js:173
    at Array.forEach (<anonymous>)
    at Object.notifyListeners (history.js:172)
    at setState (history.js:288)
    at history.js:369
    at Object.confirmTransitionTo (history.js:145)
    at Object.push (history.js:350)
Ikke er den tom heller, når jeg gjør som du sa sier den:

Kode

[]Token is: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcmVzaCI6ZmFsc2UsImlhdCI6MTYxNzEyNjQ3NCwianRpIjoiNDFlZWFmNjMtZDE0YS00ZGYzLWIwNmEtOTgxOTBjMTM1MWMyIiwibmJmIjoxNjE3MTI2NDc0LCJ0eXBlIjoiYWNjZXNzIiwic3ViIjp7ImZpcnN0X25hbWUiOiJwaW5uZSIsImxhc3RfbmFtZSI6InZpayIsImVtYWlsIjoicGlubmVAcGlubmUubm8ifSwiZXhwIjoxNjE3MTI3Mzc0fQ.owMLJ4q975N5J_z9gttFFUMMQ8xiOs0TcnDppk-A5O4[/]
Sist endret av Quiztneffer; 30. mars 2021 kl. 19:49. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
robhol
NOOOOOOOOOOOOOOOOOO-
robhol's Avatar
6.426 5.659
30. mars 2021
Som sagt, det du prøver å få "first_name" av er udefinert. Et kryptert token er ikke spesielt nyttig for å finne ut hvorfor dette er tilfellet.
etse
Ukjent
Donor
6.181 4.151
30. mars 2021
@robhol: JWT token er ikke kryprtert. De er bare encodet+signert. Altså kan man lett decode de uten å vite nøkkelen. Nøkkelen er kun for signaturen.

Jeg sjekket fort opp tokenet ditt på https://jwt.io/
Og outputen jeg fikk fra den er:

Kode

{
  "fresh": false,
  "iat": 1617126474,
  "jti": "41eeaf63-d14a-4df3-b06a-98190c1351c2",
  "nbf": 1617126474,
  "type": "access",
  "sub": {
    "first_name": "pinne",
    "last_name": "vik",
    "email": "pinne@pinne.no"
  },
  "exp": 1617127374
}
Tokenet har altså first_name og last_name på seg. Men det ligger under `sub.first_name`
Jeg har aldri brukt det biblioteket du bruker, så misstanker du bare henter ut verdien feil.

F.eks. kan det være du skal bruke

Kode

decoded.sub.first_name
Men for å sjekke dette er det letteste å sjekke hvordan det decodede tokenet ser ut.

Prøv følgende kode og se hva den printer:

Kode

         componentDidMount() {
            const token = localStorage.usertoken
            const decoded = jwt_decode(token)
            console.log("Decoded token is:", decoded);
          }
Quiztneffer
Trådstarter
71 2
31. mars 2021
Jeg tester i morgen! Kommer tilbake med info, tusen takk.

Hei, @etse - når jeg prøver den koden du skrev helt nederst får jeg dette, og ble logget inn til profilsiden.
Leter den etter email før first_name? Er det noe?

Kode

{fresh: false, iat: 1617173845, jti: "94bac17d-6d94-41d5-a68f-f08480c47728", nbf: 1617173845, type: "access", …}
exp: 1617174745
fresh: false
iat: 1617173845
jti: "94bac17d-6d94-41d5-a68f-f08480c47728"
nbf: 1617173845
sub:
email: "pinne@pinne.no"
first_name: "pinne"
last_name: "freak"
Når jeg endret til .sub.first_name så kommer jeg inn på profil - så der var du en engel @etse
Nå virker det til at det er mye annet rart med denne 'appen' - for nå testet jeg et innloggingsforsøk med feil bruker og passord - da er det tilbake i sitt vante spor å serverer meg feilmeldinger:

Kode

Unhandled Rejection (TypeError): Cannot read property 'error' of undefined
(anonymous function)
src/components/Login.js:29
  26 | }
  27 | 
  28 | login(user).then(res => {
> 29 |   if (!res.error) {
  30 |     this.props.history.push(`/profile`)
  31 |   }
  32 | })
Sist endret av Quiztneffer; 31. mars 2021 kl. 09:14. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
etse
Ukjent
Donor
6.181 4.151
31. mars 2021
Skal jeg være brutalt ærlig, tror jeg du har gått 2 steg for raskt frem. Basert på tingene du spør om hjelp til fremstår du som nybegynner og da er det å implementere JWT-login å gå litt raskt frem. Egentlig burde du ta 2 steg tilbake og se litt på basics med programmering. Gjerne med React og JavaScript f.eks.

Feilene du får her er det jeg vil jeg kalle relativt basic å debugge. Ja, det kan være du klarer å kave deg gjennom det å få til en innlogging som ser ut som den virker. Men om den er sikker og riktig implementert ville jeg vært skeptisk til. I tillegg blir jeg litt beskymret for hvor stort læringsutbytte egentlig er når man hele tiden må spørre om enkle ting.

Jeg tror du kunne lært mye mer om programmering ved å gå litt mer tilbake til basics, og så kommet tilbake til dette med å implementere JWT når du har litt mer forutsetninger for å finne ut av disse grunnleggende tingene selv.

Jeg sier ikke dette for å være vanskelig, jeg ønsker gjerne at flere lærer seg å programmere. Men jeg tror ikke riktig fremgangsmåte er å kaste seg ut på dypt vann for å lære å svømme. Prøv å ta 1 steg om gangen. Akkurat nå virker det som du prøver å lære alle disse samtidig:

- Generell programmering
- Python
- Flask
- Javascript
- React
- JWT
- API

Det blir litt for mye nytt på en gang. Om det er Python og Flask godt først, eller React+JS er ikke så viktig. Men fokuser gjerne på 1 ting om gangen. Å lage en fullstendig web-app med login, API og alt slik virker som er veldig dypt vann for deg akkurat nå.
Sist endret av etse; 31. mars 2021 kl. 15:40.
Tysteren
682 272
31. mars 2021
Sitat av Quiztneffer Vis innlegg
Jeg tester i morgen! Kommer tilbake med info, tusen takk.

Hei, @etse - når jeg prøver den koden du skrev helt nederst får jeg dette, og ble logget inn til profilsiden.
Leter den etter email før first_name? Er det noe?

Kode

{fresh: false, iat: 1617173845, jti: "94bac17d-6d94-41d5-a68f-f08480c47728", nbf: 1617173845, type: "access", …}
exp: 1617174745
fresh: false
iat: 1617173845
jti: "94bac17d-6d94-41d5-a68f-f08480c47728"
nbf: 1617173845
sub:
email: "pinne@pinne.no"
first_name: "pinne"
last_name: "freak"
Vis hele sitatet...
En ting vil jeg gjerne påpeke. Det som ligger i kode-blokken du har sitert nå er et token, altså ikke nødvendigvis en del av selve skriptet. Det er informasjon som skriptet henter fra. At email kommer før first_name i dette tilfellet er ikke interessant. Det er ikke noe feil med tokenet.
Quiztneffer
Trådstarter
71 2
7. april 2021
Hei @etse og takk for svarene og den siste meldingen.
Jeg er enig i meldingen din angående react, det ble nærmest en liten besettelse - at det bare skulle fungere - ved et slik oppheng er det ikke like enkelt å se seg tilbake og se mangelen av læringspotensialet. I utgangspunktet er ikke programmering nytt for meg, men react er nytt. En annen ting jeg har lært, etter tidligere programmeringsprosjekter, er å gjøre så mye som mulig selv - så det er en dypere forståelse i prosjektet for meg, ikke bare gjennomføringen.
Derfor har jeg gått tilbake, for API i flask og python har jeg erfaring med fra tidligere, bruker følgelig mitt allerede lagde API. Til forskjell lager jeg nå react fra ende til annen og. Altså: det er ikke noe poeng i det jeg gjør utenom læring for øyeblikket, så om det tar tid er det helt ok. Takk igjen!