NextAuth应用中访问令牌的安全管理：会话存储与刷新机制

// pages/api/auth/[...nextauth].ts
import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";
import jwt_decode from "jwt-decode"; // 假设用于解码用户信息的库

const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL; // 你的后端API基础URL

interface JwtDecodedAttributes {
  userId: string;
  username: string;
  email: string;
  role: string;
  profilepicture?: string;
  iat: number; // Issued At
  exp: number; // Expiration Time
}

export const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt", // 确保使用JWT会话策略
  },
  providers: [
    CredentialsProvider({
      name: "Credentials", // 提供者名称
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        if (!credentials) {
          return null;
        }
        const { username, password } = credentials as {
          username: string;
          password: string;
        };

        try {
          // 调用你的后端登录API
          const response = await axios.post(`${BASE_URL}/login`, {
            username,
            password,
          });

          if (response?.data) {
            const { userToken, userRefreshToken } = response.data;
            // 解码访问令牌以获取用户基本信息，用于NextAuth的用户对象
            const user: JwtDecodedAttributes = jwt_decode(userToken);

            return {
              id: user.userId, // NextAuth要求用户对象必须有id
              name: user.username,
              email: user.email,
              role: user.role,
              profilepicture: user.profilepicture,
              // 将访问令牌和刷新令牌添加到用户对象中
              token: userToken,
              refresh: userRefreshToken,
              // 其他从JWT中解析出的信息
              iat: user.iat,
              exp: user.exp,
              username: user.username,
              userId: user.userId,
            };
          }
        } catch (error) {
          console.error("Login error:", error);
          // 可以根据错误类型返回不同的信息
        }
        return null; // 认证失败
      },
    }),
  ],
  pages: {
    signIn: "/login", // 自定义登录页面路径
  },
  callbacks: {
    // ... 下面会详细讲解jwt和session回调
  },
};

export default NextAuth(authOptions);

// ... authOptions 内部
callbacks: {
  async jwt({ token, user }) {
    // user对象只在用户首次登录或会话更新时存在
    if (user) {
      // 将从authorize函数返回的用户数据（包括token和refresh）合并到JWT token中
      return { ...token, ...user };
    }
    // 后续请求，user为undefined，直接返回现有token
    return token;
  },
  // ... session callback
}

// ... authOptions 内部
callbacks: {
  // ... jwt callback
  async session({ session, token }) {
    // 将JWT token中的数据（包括访问令牌和刷新令牌）赋值给session.user
    session.user = token as any; // 类型断言以方便访问自定义属性
    return session;
  },
}

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

function MyComponent() {
  const { status, data } = useSession();

  if (status === "loading") {
    return <div>Loading session...</div>;
  }

  if (status === "authenticated") {
    // 可以安全地访问存储在会话中的访问令牌
    const accessToken = data?.user?.token;
    console.log("Access Token:", accessToken);

    // 假设你需要用这个令牌调用受保护的API
    // fetchProtectedData(accessToken);
  }

  return (
    <div>
      {status === "authenticated" ? (
        <p>Welcome, {data?.user?.name}!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}