如何使用 Redux 刷新 JWT 令牌？

Question

我们的 React Native Redux 应用使用 JWT 令牌进行身份验证。有许多操作需要此类令牌，​​并且其中很多是同时调度的，例如应用加载时。

例如

componentDidMount() {
    dispath(loadProfile());
    dispatch(loadAssets());
    ...
}

loadProfile 和 loadAssets 都需要 JWT。我们将令牌保存在状态和AsyncStorage 中。我的问题是如何处理令牌过期。

原本我打算使用中间件来处理令牌过期

// jwt-middleware.js

export function refreshJWTToken({ dispatch, getState }) {

  return (next) => (action) => {
    if (isExpired(getState().auth.token)) {
      return dispatch(refreshToken())
          .then(() => next(action))
          .catch(e => console.log('error refreshing token', e));
    }
    return next(action);
};

}

我遇到的问题是loadProfile 和loadAssets 操作都会刷新令牌，因为在发送它们时令牌将过期。理想情况下，我想“暂停”需要身份验证的操作，直到刷新令牌。有没有办法用中间件做到这一点？

Answer 1

我找到了解决这个问题的方法。我不确定这是否是最佳实践方法，并且可能会对其进行一些改进。

我最初的想法是：JWT 刷新在中间件中。如果使用thunk，则该中间件必须位于thunk 之前。

...
const createStoreWithMiddleware = applyMiddleware(jwt, thunk)(createStore);

然后在中间件代码中，我们检查令牌是否在任何异步操作之前过期。如果它过期了，我们还会检查我们是否已经在刷新令牌——为了能够进行这样的检查，我们将新令牌的承诺添加到状态。

import { refreshToken } from '../actions/auth';

export function jwt({ dispatch, getState }) {

    return (next) => (action) => {

        // only worry about expiring token for async actions
        if (typeof action === 'function') {

            if (getState().auth && getState().auth.token) {

                // decode jwt so that we know if and when it expires
                var tokenExpiration = jwtDecode(getState().auth.token).<your field for expiration>;

                if (tokenExpiration && (moment(tokenExpiration) - moment(Date.now()) < 5000)) {

                    // make sure we are not already refreshing the token
                    if (!getState().auth.freshTokenPromise) {
                        return refreshToken(dispatch).then(() => next(action));
                    } else {
                        return getState().auth.freshTokenPromise.then(() => next(action));
                    }
                }
            }
        }
        return next(action);
    };
}

最重要的部分是refreshToken函数。该函数需要在刷新令牌时调度操作，以便状态将包含新令牌的承诺。这样，如果我们同时调度多个使用令牌身份验证的异步操作，则令牌只会刷新一次。

export function refreshToken(dispatch) {

    var freshTokenPromise = fetchJWTToken()
        .then(t => {
            dispatch({
                type: DONE_REFRESHING_TOKEN
            });

            dispatch(saveAppToken(t.token));

            return t.token ? Promise.resolve(t.token) : Promise.reject({
                message: 'could not refresh token'
            });
        })
        .catch(e => {

            console.log('error refreshing token', e);

            dispatch({
                type: DONE_REFRESHING_TOKEN
            });
            return Promise.reject(e);
        });



    dispatch({
        type: REFRESHING_TOKEN,

        // we want to keep track of token promise in the state so that we don't try to refresh
        // the token again while refreshing is in process
        freshTokenPromise
    });

    return freshTokenPromise;
}

我意识到这很复杂。我也有点担心在refreshToken 中调度动作本身不是动作。请让我知道您知道的任何其他使用 redux 处理过期 JWT 令牌的方法。

Answer 2

您可以保留一个存储变量来了解您是否仍在获取令牌，而不是“等待”操作完成：

样本缩减器

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

现在是动作创建者：

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());
       }
    };
}

这在组件安装时被调用。如果 auth 密钥是陈旧的，它将派发一个操作将 fetching 设置为 true 并刷新令牌。请注意，我们还不会加载配置文件或资产。

新组件：

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()
    } 
}

请注意，现在您尝试在 mount 上加载您的东西，但在接收道具时也在某些条件下（这将在 store 更改时被调用，因此我们可以将 fetching 保留在那里）当初始获取失败时，它将触发refreshToken。完成后，它将在存储中设置新令牌，更新组件并因此调用componentWillReceiveProps。如果它仍未获取（不确定是否需要此检查），它将加载内容。

Answer 3

我围绕redux-api-middleware 做了一个简单的包装器来推迟操作并刷新访问令牌。

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 nextCheckPostponed = (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(nextCheckPostponed)(refreshAccessToken(token))
          } else {
            return
          }
        }
      
        return rsaaMiddleware(next)(action);
      }
      return next(action);
    }
  }
}

export default createApiMiddleware();

我将令牌保持在状态中，并使用一个简单的助手将 Acess 令牌注入到请求标头中

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

所以redux-api-middleware 操作几乎保持不变

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
      ]
  }
})

我写了 article 并分享了 project example，它展示了 JWT 刷新令牌工作流程的实际应用

Answer 4

我认为 redux 不是强制执行令牌刷新原子性的正确工具。

相反，我可以为您提供一个可以从任何地方调用的原子函数，并确保您始终获得一个有效的令牌：

/*
    The non-atomic refresh function
*/

const refreshToken = async () => {
    // Do whatever you need to do here ...
}

/*
    Promise locking-queueing structure
*/

var promiesCallbacks = [];

const resolveQueue = value => {
  promiesCallbacks.forEach(x => x.resolve(value));
  promiesCallbacks = [];
};
const rejectQueue = value => {
  promiesCallbacks.forEach(x => x.reject(value));
  promiesCallbacks = [];
};
const enqueuePromise = () => {
  return new Promise((resolve, reject) => {
    promiesCallbacks.push({resolve, reject});
  });
};

/*
    The atomic function!
*/

var actionInProgress = false;

const refreshTokenAtomically = () => {
  if (actionInProgress) {
    return enqueuePromise();
  }

  actionInProgress = true;

  return refreshToken()
    .then(({ access }) => {
      resolveQueue(access);
      return access;
    })
    .catch((error) => {
      rejectQueue(error);
      throw error;
    })
    .finally(() => {
      actionInProgress = false;
    });
};

也在这里发布：https://stackoverflow.com/a/68154638/683763