React 16.3 Context API token based authentication

Limbaje de Programare JavaScript / Node
1

Începând cu versiunea 16.3 React primește Context API ce poate înlocui Redux

Încerc să folosesc acest API pentru un sistem de login bazat pe token. Nu știu însă cum să fac tokenul să fie persistent.

În componenta App.js (root) creez contextul și state-ul aplicației:

class MpProvider extends Component {
  state = {
    is_authenticated: false,
    mp_token: '',
    user_credentials: {}
  }

Acest MpProvider conține și metoda care aduce token-ul dintr-un backend Flask folosind basic auth:

getToken: (e) => {
          e.preventDefault();
          fetch(`http://${API_URI}:5000/api-v1/login`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                "email": this.state.user_credentials.user,
                "password": this.state.user_credentials.password,
            })
          })
          .then(response => response.json())
          .then(response => {
              if(response.token !== ''){
                  this.setState({
                    mp_token:response.token,
                    is_authenticated: true
                  });
              }
          })
        },

Acum în functie de valoarea lui is_authenticated pot proteja anumite rute din aplicatie și la nevoie fac redirect către pagina de login.

Problema mea este că după fiecare refresh acest state este resetat. Cum trebuie totuși folosit Context în acest caz? Scriu token-ul in localStorage și îl citesc de acolo?

1 Like
2

Intr-o situatie ca a ta, sa il salvezi in localStorage si sa-l incarci de acolo la “boot-up”-ul aplicatiei e cel mai OK.

Totusi, cred ca am mai zis pe undeva, ca tot ce tine de authenticare in aplicatii web ar trebui sa fie facut prin “metodele clasice”. Cel putin cand ajungi pe la flow-uri oauth (cum sunt cele de la fb, google etc.) o sa trebuiasca sa ai asta. Simplifica si codul - fie ai, fie n-ai token-ul + user info intr-o sesiune a aplicatiei client.

2 Likes
3

Ai aici un exemplu de asemenea flow ce a fost utilizat cu succes într-o aplicație din production.

După cum a spus și @horia141, token-ul este salvat în localStorage și încărcat de acolo la fiecare boot de aplicație. Un moment crucial este și modul în care state-ul este synced înapoi în localStorage cu setAndSyncState(). Ai acolo și un exemplu de utilizare a Context API, din Login.

5 Likes