entityMap|blocks|key|7u7jk|text|以下是我在过去所做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ekd1h|我认为，每次调用api时传递jwtToken都不是一个好方法。如果你使用下面的方法，你只需要|bqbkk|const+data+=+{
++++++id:+id
++++};
++++return+userApi
++++++.post('/user/account/unlink',+data)|code-block|syntax|javascript|7jnv|而且，你不需要每次都调用refreshToken。|1sm32|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`+%7C%7C
++++++++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;|1ah0k^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|R|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|S|9|@]|A|@]|B|$H|I]]|$2|N|4|-4|6|7|8|T|9|@]|A|@]|B|$]]]]

Here's what I did in the past:

Passing jwtToken everytime you call the api is not a good way, I think.
If you use the following one, you just need to

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

Also, you don't need to call refreshToken everytime.

<pre><code>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) =&gt; {
 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) =&gt; {
 Promise.reject(error);
 }
);

//Add a response interceptor

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

 if (
 error.response.status === 401 &amp;&amp;
 (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 &amp;&amp; !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) =&gt; {
 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;
</code></pre>

entityMap|blocks|key|6k2qe|text|是的，只要找出解决方案，我只需将拦截器请求中的config.data更改为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a6nt0|if+(jwtToken)+{
++++++config.data+=+{+accessToken:+jwtToken,+...config.data+};
++++}|code-block|syntax|javascript|cibpu|因此，它将从组件中获取数据，并在创建POST之前合并截取数据。|ekaa^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|L|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|M|9|@]|A|@]|B|$]]|$2|J|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

And yeah just figure out the solution, I just change the config.data in interceptor request to

<pre><code>if (jwtToken) {
 config.data = { accessToken: jwtToken, ...config.data };
 }
</code></pre>

so it'll took data from component and combine in intercept data before making a POST.

I have this function action

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

but I also intercept the request as per following

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

this will make a POST to <code>userApi</code> using the data from the interceptor instead of the <code>unlinkAccount</code> function. Is there a way to combine both data or pass as a 'props' to the <code>unlinkAccount</code> function as I need to pass data as per the following format:

<pre><code>const data = {
 id: id,
 accessToken: jwtToken
}
</code></pre>

Thank you.

Axios: combining data request from interceptors and from component before POST

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我有这个函数动作 export function unlinkAccount(id) {  return function(dispatch) {    const data = {      id: id    };    return userApi      .post('/user/account/unlin...

问Axios:在POST之前组合来自拦截器和组件的数据请求
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Axios:在POST之前组合来自拦截器和组件的数据请求EN