Comment utiliser Redux pour rafraîchir JWT token?

au lieu d '"attendre" qu'une action se termine, vous pouvez plutôt garder une variable de stockage pour savoir si vous êtes toujours en train de récupérer des tokens:

réducteur D'échantillon

const initialState = {
    fetching: false,
};
export function reducer(state = initialState, action) {
    switch(action.type) {
        case 'LOAD_FETCHING':
            return {
                ...state,
                fetching: action.fetching,
            }
    }
}

Maintenant l'action du créateur:

export function loadThings() {
    return (dispatch, getState) => {
        const { auth, isLoading } = getState();

        if (!isExpired(auth.token)) {
            dispatch({ type: 'LOAD_FETCHING', fetching: false })
            dispatch(loadProfile());
            dispatch(loadAssets());
       } else {
            dispatch({ type: 'LOAD_FETCHING', fetching: true })
            dispatch(refreshToken());
       }
    };
}

ceci est appelé lorsque le composant est monté. Si la clé auth est périmée, elle envoie une action à set fetching à true et rafraîchir le token. Notez que nous n'allons pas charger le profil ou les actifs encore.

Nouveau composant:

componentDidMount() {
    dispath(loadThings());
    // ...
}

componentWillReceiveProps(newProps) {
    const { fetching, token } = newProps; // bound from store

    // assuming you have the current token stored somewhere
    if (token === storedToken) {
        return; // exit early
    }

    if (!fetching) {
        loadThings()
    } 
}

notez que maintenant vous tentez de charger vos objets sur mount mais aussi dans certaines conditions lors de la réception des accessoires (ceci sera appelé lorsque le magasin change pour que nous puissions garder fetching là) quand le fetch initial échoue, il déclenche le refreshToken. Lorsque cela sera fait, il définira le nouveau token dans la mémoire, mettant à jour le composant et appelant donc componentWillReceiveProps. Si ce n'est pas encore l'extraction (pas sûr de cette vérification est nécessaire), il va charger des choses.

j'ai fait un simple wrapper autour de redux-api-middleware pour reporter les actions et rafraîchir le jeton d'accès.

middleware.js

import { isRSAA, apiMiddleware } from 'redux-api-middleware';

import { TOKEN_RECEIVED, refreshAccessToken } from './actions/auth'
import { refreshToken, isAccessTokenExpired } from './reducers'


export function createApiMiddleware() {
  const postponedRSAAs = []

  return ({ dispatch, getState }) => {
    const rsaaMiddleware = apiMiddleware({dispatch, getState})

    return (next) => (action) => {
      const nextCheckPostoned = (nextAction) => {
          // Run postponed actions after token refresh
          if (nextAction.type === TOKEN_RECEIVED) {
            next(nextAction);
            postponedRSAAs.forEach((postponed) => {
              rsaaMiddleware(next)(postponed)
            })
          } else {
            next(nextAction)
          }
      }

      if(isRSAA(action)) {
        const state = getState(),
              token = refreshToken(state)

        if(token && isAccessTokenExpired(state)) {
          postponedRSAAs.push(action)
          if(postponedRSAAs.length === 1) {
            return  rsaaMiddleware(nextCheckPostoned)(refreshAccessToken(token))
          } else {
            return
          }
        }

        return rsaaMiddleware(next)(action);
      }
      return next(action);
    }
  }
}

export default createApiMiddleware();

je garde les tokens dans l'état, et j'utilise un helper simple pour injecter le token Acess dans les en-têtes de requête

export function withAuth(headers={}) {
  return (state) => ({
    ...headers,
    'Authorization': `Bearer ${accessToken(state)}`
  })
}

redux-api-middleware actions reste presque inchangé

export const echo = (message) => ({
  [RSAA]: {
      endpoint: '/api/echo/',
      method: 'POST',
      body: JSON.stringify({message: message}),
      headers: withAuth({ 'Content-Type': 'application/json' }),
      types: [
        ECHO_REQUEST, ECHO_SUCCESS, ECHO_FAILURE
      ]
  }
})

j'ai écrit le article et partagé l' exemple de projet, qui montre JWT refresh token workflow en action