Ax ios: объединение запроса данных от перехватчиков и от компонента перед POST - PullRequest
Новая
       37

Ax ios: объединение запроса данных от перехватчиков и от компонента перед POST

0 голосов
/ 17 января 2020

У меня есть эта функция action 

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

, что приведет к POST к userApi с использованием данных от перехватчика вместо функции unlinkAccount. Есть ли способ объединить обе данные или передать в качестве «реквизита» в функцию unlinkAccount, так как мне нужно передать данные в следующем формате: 

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

Спасибо.

Ответы [ 2 ]

0 голосов
/ 17 января 2020

И да, просто выясните решение, я просто изменил config.data в запросе перехватчика на 

if (jwtToken) {
      config.data = { accessToken: jwtToken, ...config.data };
    }

, чтобы он брал данные из компонента и объединял данные перехвата перед выполнением POST.

0 голосов
/ 17 января 2020

Вот что я делал в прошлом:

Передача jwtToken каждый раз, когда вы вызываете API, я думаю, не очень хороший способ. Если вы используете следующий, вам просто нужно 

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;
...