Axios：在POST之前合并来自拦截器和组件的数据请求

Question

我有此功能动作

export function unlinkAccount(id) {
  return function(dispatch) {
    const data = {
      id: id
    };
    return userApi
      .post('/user/account/unlink', data)
      .then(res => console.log('SUCCESS: unlinkAccount -> ', res))
      .catch(err => console.log('ERROR: unlinkAccount -> ', err));
  };
}

但我也按照以下要求拦截请求

userApi.interceptors.request.use(
  async config => {
    const jwtToken = await refreshToken();
    if (jwtToken) {
      config.data = { accessToken: jwtToken };
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

这将使用来自拦截器的数据而非userApi函数对unlinkAccount进行POST。有没有一种方法可以合并数据或将其作为“属性”传递给unlinkAccount函数，因为我需要按照以下格式传递数据：

const data = {
   id: id,
   accessToken: jwtToken
}

谢谢。

Answer 1

这是我过去所做的：

我认为，每次调用api时传递jwtToken都不是一个好方法。如果使用以下内容，则只需

const data = {
      id: id
    };
    return userApi
      .post('/user/account/unlink', data)

而且，您不必每次都调用refreshToken。

import axios from 'axios';

import { store } from '../index';
import { updateAuth } from '../redux/actions/auth';
import { apiURL } from '../config';

axios.defaults.baseURL = apiURL;

// Add a request interceptor
axios.interceptors.request.use(
  (config) => {
    const { tokenType, accessToken, loggedIn } = store.getState().auth;
    const token = `${tokenType} ${accessToken}`;
    if (loggedIn) {
      config.headers['Authorization'] = token;
    }
    config.headers['Content-Type'] = 'application/json';
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

//Add a response interceptor

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  function(error) {
    const originalRequest = error.config;

    if (
      error.response.status === 401 &&
      (originalRequest.url === `${apiURL}auth/login` ||
        originalRequest.url === `${apiURL}auth/refresh-token`)
    ) {
      // router.history.push('/auth/login');
      return Promise.reject(error);
    }

    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const { refreshToken } = store.getState().auth;
      const { email } = store.getState().user;

      return axios
        .post('/auth/refresh-token', {
          email,
          refreshToken
        })
        .then((response) => {
          const { data: res } = response;
          if (res.code === 200) {
            store.dispatch(updateAuth({ ...res.token }));
            const { tokenType, accessToken } = res.token;
            axios.defaults.headers.common[
              'Authorization'
            ] = `${tokenType} ${accessToken}`;
            return axios(originalRequest);
          }
        });
    }
    return Promise.reject(error);
  }
);

export default axios;