如何使用axios和redux在Reactjs中创建刷新令牌中间件

Question

我在前端使用reactjs，问题是在一段时间后，accessToken过期，服务器发送状态为401(未经授权(，然后我需要将刷新令牌发送回服务器，它工作正常，直到我手动发送刷新令牌。我设置了setInterval函数，但这不是一个在令牌过期时自动发送的好方法。我也在谷歌上搜索过它，但每个人都在谈论创建中间件。任何人都请告诉我如何创建中间件或任何其他解决方案，或链接任何与之相关的文章。我创建了这个，但这对我不起作用，然而当服务器发送401的状态时，中间件运行了，但它没有调度我的refreshToken((函数

const customMiddleWare = store => next => action => {
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
if(error.status === 401) {
// do something when unauthorized
store.dispatch(refreshToken());
}
return Promise.reject(error);
});
console.log("Middleware triggered:", action);
next(action);
}

顺便说一下，我正在使用redux，redux thunk和axios。谢谢，

Answer 1

一段时间前，我习惯于使用下一种方式：

首先，我创建了一些api文件夹，其中每个函数都返回axios请求的数据

// /api.js
export function signIn (data) {
return {
method: 'post',
api: '/sign-in'
data: data
}
}
export function signUp (data) {
return {
method: 'post',
api: '/registration'
data: data
}
}

然后我按照特定的规则生成动作类型，比如：SIN_IN_REQUEST，其中：SIGN_IN表示/api.js中的signIn函数；REQUEST意味着您需要执行api请求。结果，我的中间件看起来像下一个：

// request middleware
const instance = axios.create({
baseURL: '/api'
});
function camelize(str) {
return str.replace(/(?:^w|[A-Z]|bw)/g, function(word, index) {
return index === 0 ? word.toLowerCase() : word.toUpperCase();
}).replace(/s+/g, '');
}
const customMiddleWare = store => next => action => {
if (!action.type.endsWith('_REQUEST')) {
next();
return;
}
const methodName = action.type.replace('_REQUEST', ''); // removed _REQUEST from action type
const camelCaseMethodName = camelize(methodName); // the result is "signIn"
const method = api[camelCaseMethodName];
if (!method) {
next();
return;
}
const dataForRequest = method(action.payload);
try {
const response = await instance(dataForRequest);
const newActionType = action.type.replace('_REQUEST', '_SUCCESS');
dispatch({
type: newActionType,
payload: {
requestPayload: action.payload,
response: response,
}
})
} catch(error) {
if (error.status === '401') {
dispatch(refreshToken());
next();
return;
}
const newActionType = action.type.replace('_REQUEST', '_FAILURE');
dispatch({
type: newActionType,
payload: {
requestPayload: action.payload,
error: error,
}
})
}
next();
}

之后，您可以轻松地管理应用程序中的任何api请求，如下所示：

function someTHunkMethod(username, password) {
return (dispatch, getState) => {
dispatch({
type: 'SIGN_IN_REQUEST',
payload: {
username,
password
}
})
}
}
function oneMoreThunk(data) {
return (dispatch, getState) => {
dispatch({
type: 'GET_USERS_REQUEST',
payload: data
})
}
}

在减速器中做一些类似的事情

...
switch (action.type) {
case 'SIGN_REQUEST':
return {
isLoading: true,
user: null
}
case 'SIGN_SUCCESS':
return {
isLoading: false,
user: action.payload.response.data
}
case 'SIGN_FAILURE':
return {
isLoading: false,
user: null
}
default:
return state
}