Gestione dell'autenticazione utente tramite Redux e Redux Router

Question

Mi chiedevo in che modo le persone gestiscono normalmente l'autenticazione utente con redux? Sto usando Redux Router e ho un'API di backend rails che gestisce l'autenticazione dell'utente tramite un token di autenticazione.

Quando l'utente invia il modulo di accesso, l'API restituirà il token di autenticazione da utilizzare per le richieste successive. Originariamente ho appena archiviato quel token di autenticazione nella struttura ad albero singolo e ogni volta che invio un'azione che deve effettuare una richiesta API che richiede l'autenticazione utente, utilizzo (dispatch, getState) per recuperare quel token di autenticazione e quindi includerlo nell'API richiesta. Quindi: getState(). CurrentUser.auth_token.

Non sono sicuro se mi sto avvicinando a questo nel modo giusto. Alcune persone usano localStorage con Redux per l'autenticazione dell'utente per simulare come sessioni lato server? Quindi ogni volta che viene effettuata una richiesta API, controllo la memoria locale per il token auth e se è lì che l'utente ha effettuato l'accesso?

Quello che ho finito di fare era usare js-cookies e ho fatto un Cookie.set quando l'utente si è autenticato. Il mio componente root <App /> ha quindi un componenteDidMount che invia un'azione initAuth() che controlla il cookie corrente per vedere se è ancora valido. Se è così mantiene l'utente connesso, altrimenti ripristina il riduttore di autenticazione al suo stato predefinito.

Questo è il link per il repo con l'autenticazione dell'utente: https://github.com/SpencerCDixon/Kira/blob/master/client/actions/AuthActions.js

Eventuali suggerimenti o risorse sarebbe molto apprezzato. Ho esaminato l'esempio del mondo reale e l'esempio di autenticazione di React Router finora. L'esempio di React Router sembra utilizzare localStorage ed è per questo che sono curioso di sapere se è la strada giusta da prendere. Ho notato che esiste anche un pacchetto npm di Redsterestorage.

Mi piacerebbe sapere se sto accidentalmente aprendomi a una sorta di attacco di autenticazione o se c'è un modo migliore per avvicinarsi a questo flusso!

Answer 1

Mi chiedevo come le persone gestiscono normalmente l'autenticazione utente con redux?

Ero in quella situazione in così tanti progetti e ho terminato con una soluzione che non mi fa sudare ogni volta che devo gestire l'autenticazione nelle mie applicazioni React/Redux.

Nei miei progetti, sto usando Node.js ma questo non cambia nulla, è possibile utilizzare qualsiasi tecnologia lato server.

La soluzione

ho notato che in un'applicazione singola pagina (SPA), il meccanismo di autenticazione viene gestito sul lato client, come hai detto tu, controllando se l'utente dispone di un token, convalidarlo con il server e quindi "reindirizza" su una base di percorso pertinente, ora non è un problema se utilizzi React/Redux, Angular, Ember o Backbone per la tua SPA, sarà sempre pessimo.

Quindi ho separato il processo di autenticazione (registrazione/accesso) dall'applicazione principale, quindi quando un utente avvia la mia applicazione per la prima volta, il server verifica un cookie token, Se l'utente ha quel cookie con il richiesta, il server convalida questo token e se è valido, reindirizza il client alla pagina principale dell'applicazione (index.html per esempio), se il token non è valido o non esiste, il server reindirizza il client a un login/pagina di registrazione (login.html/signup.html).

La pagina login.html non fa parte dell'applicazione principale (quella in index.html), infatti, ha una base di codice diversa (più leggera con molto meno codice in modo che la pagina possa essere caricata ancora più velocemente) e quando un l'utente prova ad accedere, il server ha convalidato il nome utente e la password da quella pagina login.html e se si tratta di credenziali valide, il server imposta un cookie token per quell'utente e lo reindirizza alla pagina principale dell'applicazione (index.html) dove il codice dell'applicazione può essere caricato senza la necessità di gestire l'autenticazione poiché se un utente è stato in grado di caricare questa pagina (index.html) significa che deve avere un token valido.

Answer 2

ho appena finito di lavorare su redux auth open source project. sto memorizzando token in localStorage. per il back-end sto usando il nodo, ma immagino che avrai un'idea.

https://github.com/DimitriMikadze/node-redux-auth