javascript-如何使用Redux刷新JWT令牌?
我们的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
操作将同时刷新令牌,因为在分发它们时令牌将过期。 理想情况下,我想“暂停”需要身份验证的操作,直到刷新令牌为止。 有没有办法用中间件做到这一点?
我找到了解决此问题的方法。 我不确定这是否是最佳做法,并且可能会有一些改进。
我最初的想法仍然存在:JWT刷新位于中间件中。 如果使用thunk
,则该中间件必须位于refreshToken
之前。
...
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令牌的任何其他方法。
您可以保留一个存储变量来知道是否仍在获取令牌,而不必“等待”操作完成:
样品减少器
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()
}
}
请注意,现在您尝试在装载道具时也要在某些条件下装载东西(当商店发生变化时会调用该东西,因此我们可以将fetching
保存在那里)。当初始获取失败时,它将触发refreshToken
。 完成后,它将在商店中设置新令牌,更新组件,然后调用componentWillReceiveProps
。如果仍未获取(不确定是否需要此检查),它将加载内容。
我在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 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();
我将令牌保持在该状态,并使用一个简单的助手将Access令牌注入到请求标头中
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
]
}
})
我写了这篇文章并共享了该项目示例,该示例演示了JWT刷新令牌工作流程的实际应用