使用 Redux Toolkit 查询刷新令牌

Question

首先，我将从 rtk 官方文档网页上找到的片段开始。

import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import { tokenReceived, loggedOut } from './authSlice'

const baseQuery = fetchBaseQuery({ baseUrl: '/' })
const baseQueryWithReauth = async (args, api, extraOptions) => {
  let result = await baseQuery(args, api, extraOptions)
  if (result.error && result.error.status === 401) {
    // try to get a new token
    const refreshResult = await baseQuery('/refreshToken', api, extraOptions)
    if (refreshResult.data) {
      // store the new token
      api.dispatch(tokenReceived(refreshResult.data))
      // retry the initial query
      result = await baseQuery(args, api, extraOptions)
    } else {
      api.dispatch(loggedOut())
    }
  }
  return result
}

乍一看一切看起来都很好，但我的刷新令牌端点期望该方法是PUT，而不是GET。

PUT收到401 Unauthorized响应后，如何使用fetchBaseQueryReact Toolkit Query (RTK Q) 库提供的功能在此函数内执行请求？

我还将令牌存储在本地存储中，而 RTK Q 示例则将令牌存储在 redux 状态中。不确定这是否是相关信息，但仍然如此。

fetch()在检查错误后，我尝试将示例更改为使用本机401，并且它几乎可以正常工作。我收到一个新的令牌并将其换出，但是例如当我在令牌过期后刷新页面时，它无法正常工作。

Answer 1

baseQueryfetch与原样的包装器相同fetchBaseQuery- 它的工作方式与您fetchBaseQuery在整个应用程序中使用的方式类似 - 通常通过从函数返回一些内容query，这里是直接调用它。

就像这两个是等价的：

query(){
  return 'https://example.com'
}
//or
query(){
  return { url: 'https://example.com', method: 'GET' }
}

这两个也是等价的：

await baseQuery('/refreshToken', api, extraOptions)

//or
await baseQuery({ url: '/refreshToken', method: 'GET' }, api, extraOptions)

根据该信息，您当然也可以在其中交换PUT并添加您想要的任何内容。

虽然通常建议不要在 JavaScript 中的任何位置存储刷新令牌，并且最佳实践是在仅在服务器和客户端之间交换的 cookie 中拥有访问令牌httpOnly（JavaScript 无法访问），当然您也可以在其中访问 localStorage您在那里拥有的函数并从 localStorage 读取刷新令牌 - 就像您在任何其他 JavaScript 代码中所做的那样。请注意，以 JavaScript 可访问的方式存储刷新令牌通常被认为是一种安全不良做法。