Flusso per l'autenticazione dell'utente con Redux

Question

Qual è il modo Redux per organizzare il codice di autenticazione dell'utente sul lato client?

Mi piacerebbe anche imparare come integrare al meglio l'accesso di Facebook in Redux.

Answer 1

Non ho funzionato con il flusso di login di Facebook, ma penso che sarebbe la stessa idea.

Quindi, effettuare il login e memorizzare i dati, basta creare riduttore aggiuntivo per l'utente con i seguenti campi:

{ 
    access_token: null, 
    isLogin: false, 
    isProcessingLogin: true, 
    profile: {} 
} 

Naturalmente, si potrebbe avere molto più campi, si potrebbe mettere la registrazione delle informazioni qui pure (ad esempio, isUserRegistering o dettagli, qualunque sia).

Tutto quello che dovete fare - creare metodi come logIn e Logout, che farà questo flusso. In essi, modifica semplicemente i campi corrispondenti per aggiornare l'interfaccia utente per aggiungere caricamento, gestione degli errori e così via.

Qualcosa di simile a seguente codice:

// action creator 
    const logIn = (params) => { 
     return dispatch => { 
     dispatch({ type: 'PROCESSING_LOGIN' }); 
     makeAPICall(params) 
      .then(
       res => dispatch({ type: 'SUCCESS_LOGIN', payload: res }), 
       err => dispatch({ type: 'FAIL_LOGIN', payload: err }) 
      ); 
     }; 
    }; 

    // reducer 
    ['PROCESSING_LOGIN'](state) => { 
     return Object.assign({}, state, { 
      isProcessingLogin: true 
     }); 
    }, 
    [SUCCESS_LOGIN](state, action) => { 
     return Object.assign({}, state, { 
      isLogin: true, 
      isProcessingLogin: false, 
      access_token: action.payload.meta.access_token 
     }); 
    } 

devo menzionare, quell'edificio middleware per aggiungere sempre gettone potrebbe non essere così buona idea, se le richieste devono essere differenziare riduttori all'interno siano essi con simbolo o no - quindi, potrebbe essere un po 'più flessibile aggiungere il token da solo.

Answer 2

Nel mio progetto di esempio, ho semplicemente mantenuto un riduttore authed che gestiva tutti i dati utente autenticati. Lo stato iniziale e riduttore aspetto:

const initialState = { 
    accessToken: null, 
    followings: {}, 
    likes: {}, 
    playlists: [], 
    user: null 
}; 

export default function authed(state = initialState, action) { 
    switch(action.type) { 
    case types.RECEIVE_ACCESS_TOKEN: 
     return Object.assign({}, state, { 
      accessToken: action.accessToken 
     }); 

Dopo che l'utente completa il flusso di autenticazione, ho semplicemente impostare l'accesso di proprietà del token nello stato authed, e l'uso che per verificare se un utente è autenticato in tutta la mia app. Ad esempio

if (authed.accessToken) { 
    // display or do something different for logged in user 
} 

Dopo aver eseguito correttamente l'autenticazione, ho anche impostato un cookie. Quando l'utente torna, leggo il token di accesso dal cookie e verifica se è ancora valido (per Facebook potrebbe utilizzarlo con l'endpoint /me).

Se l'utente si disconnette, è sufficiente impostare lo stato authed su initialState e disattivare il cookie.

Semplice, ma funziona per me. È possibile controllare il codice qui:

https://github.com/andrewngu/sound-redux/blob/master/scripts/reducers/authed.js https://github.com/andrewngu/sound-redux/blob/master/scripts/actions/authed.js

☝ Questo file è un po 'peloso, ma basta controllare initAuth, loginUser, logoutUser, receiveAccessToken, resetAuthed funzioni.

Demo: https://soundredux.io

Answer 3

Io di solito gestire autenticazione all'interno di un riduttore di sessione e quindi definire una funzione authorized middleware per verificare se alcune condizioni sono state soddisfatte, e se non, reindirizzare. Ha funzionato abbastanza bene finora.

Edit, con semplice esempio:

export default function authorized(store) { 
    return (next) => { 
    return (action) => { 
     const { session: { loggedIn }} = store.getState() 

     if (!loggedIn) { 
     const session = cookie.load(sessionCookie.name) 

     if (session) { 
     next(restoreSession(session, activeBrand)) 

     // Not logged in, redirect. 
     } else { 
     next(replaceState({}, '/login')) 
     } 
    } 

    return next(action) 
    } 
    } 
}