Ale*_*min 12 reactjs redux redux-toolkit rtk-query
我正在尝试构建一个拦截器,以应对 RTK 查询访问令牌无效的情况。我已经通过文档中的示例构建了它,如下所示:
const baseQuery = fetchBaseQuery({
baseUrl: BASE_URL,
prepareHeaders: (headers, { getState }) => {
const {
auth: {
user: { accessToken },
},
} = getState() as RootState;
if (accessToken) {
headers.set('authorization', `Bearer ${accessToken}`);
}
return headers;
},
});
const baseQueryWithReauth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
args,
api,
extraOptions
) => {
let result = await baseQuery(args, api, extraOptions);
if (result.error && result.error.status === 401) {
const refreshResult = await baseQuery('token/refresh/', api, extraOptions);
if (refreshResult.data) {
api.dispatch(tokenUpdated({ accessToken: refreshResult.data as string }));
// retry the initial query
result = await baseQuery(args, api, extraOptions);
} else {
api.dispatch(logout());
}
}
return result;
};
export const baseApi = createApi({
reducerPath: 'baseApi',
baseQuery: baseQueryWithReauth,
endpoints: () => ({}),
});
Run Code Online (Sandbox Code Playgroud)
问题是,它token/refresh/
需要一个POST
带有刷新令牌的请求,我不知道如何重建这一行const refreshResult = await baseQuery('token/refresh/', api, extraOptions);
以使其接受参数并发出POST
请求。
phr*_*hry 11
baseQuery('token/refresh/', api, extraOptions);
你也可以这样做
baseQuery({
url: 'token/refresh/',
method: 'POST'
}, api, extraOptions);
Run Code Online (Sandbox Code Playgroud)
第一个参数fetchBaseQuery
正是您将从query
端点定义中的函数返回的内容。
至于你的其他问题,我不知道“公共”和“私有”端点到底是什么意思。调用这些查询的是您的代码,因此您应该知道何时调用哪些查询?
归档时间: |
|
查看次数: |
18745 次 |
最近记录: |