在RTK Query中结合Next Auth设置Authorization请求头

1. 在非React组件环境获取Next Auth的Access Token #

Next Auth提供了客户端端的getSession()方法，无需React钩子就能获取当前用户会话，包括Access Token。你可以直接在fetchBaseQuery的prepareHeaders中异步调用它：

import { getSession } from "next-auth/react";

const baseQuery = fetchBaseQuery({
  baseUrl: `${process.env.NEXT_PUBLIC_BASE_URL}`,
  prepareHeaders: async (headers, { getState }) => {
    // 获取Next Auth会话
    const session = await getSession();
    if (session?.accessToken) {
      headers.set('Authorization', `Bearer ${session.accessToken}`);
    }
    return headers;
  },
});

注意：必须在Next Auth的配置文件（[...nextauth].js）中正确获取并传递AD的Access Token，示例配置如下：

// [...nextauth].js
export default NextAuth({
  providers: [
    // 你的AD/Microsoft OAuth配置
  ],
  callbacks: {
    async jwt({ token, account }) {
      // 登录时将Access Token存入jwt
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      // 将Access Token同步到前端会话对象
      session.accessToken = token.accessToken;
      return session;
    },
  },
});

2. 结合Redux存储Token（可选方案） #

如果确实需要把Token同步到Redux状态中，可以在根组件（如_app.js或layout.js）中监听Next Auth的会话变化，再分发Redux action更新状态：

// 根组件
import { useSession } from "next-auth/react";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { setAccessToken } from "./features/auth/authSlice";

export default function App({ Component, pageProps }) {
  const { data: session } = useSession();
  const dispatch = useDispatch();

  useEffect(() => {
    if (session?.accessToken) {
      dispatch(setAccessToken(session.accessToken));
    } else {
      dispatch(setAccessToken(null));
    }
  }, [session, dispatch]);

  return <Component {...pageProps} />;
}

之后就能在prepareHeaders中直接从Redux状态读取Token：

const baseQuery = fetchBaseQuery({
  baseUrl: `${process.env.NEXT_PUBLIC_BASE_URL}`,
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.accessToken;
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  },
});

关键注意事项 #

• 客户端非组件环境用getSession()，服务端代码（如API路由）则用getServerSession()。
• 必须确保Next Auth的jwt和session回调正确传递Access Token，否则会话对象中不会包含该字段。

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