Redux Toolkit的createApi如何设置fetch的credentials: "include"参数

1. 在RTK createApi中配置credentials: include的方法 #

Redux Toolkit的fetchBaseQuery原生支持fetch API的credentials配置项，你直接在fetchBaseQuery的入参里全局添加即可，修改后的代码如下：

export const userApiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:4000",
    credentials: "include", // 新增这一行即可，所有请求都会自动带上跨域cookie
    prepareHeaders(headers) {
      return headers;
    },
  }),
  endpoints(builder) {
    return {
      fetchUser: builder.query<IUser, number | void>({
        query: () => `/getuser`,
      }),
    };
  },
});

如果不需要全局生效，只想给单个接口加配置，也可以在对应端点的query返回值里添加：

fetchUser: builder.query<IUser, number | void>({
  query: () => ({
    url: `/getuser`,
    credentials: "include"
  }),
}),

2. deserializeUser未被调用的原因 #

deserializeUser触发的前提是后端收到请求携带的有效session cookie，能从session存储中匹配到对应的用户信息。你遇到的问题本质就是前端发起/getuser请求时没有携带登录后谷歌回调种下的session cookie，导致后端无法识别用户身份，自然不会执行deserializeUser逻辑，req.user也就为undefined。
你配置好上述的credentials: "include"之后，前端请求就会自动带上跨域cookie，deserializeUser就会正常触发，req.user也能正常拿到值。
补充注意：你当前服务端的express-session用的是默认内存存储，重启服务后session会丢失，生产环境建议换成redis、mongodb等持久化session存储。

内容的提问来源于stack exchange，提问作者NicoWheat