NextAuth会话中存储访问令牌：安全考量与最佳实践

import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";
import jwt_decode from "jwt-decode"; // 假设您使用此库解析JWT

// 定义一个接口来匹配解码后的JWT结构
interface jwtDecodedAttributes {
  userId: string;
  username: string;
  email: string;
  role: string;
  profilepicture?: string;
  iat: number; // Issued At
  exp: number; // Expiration Time
}

const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt", // 明确使用JWT会话策略
  },
  providers: [
    CredentialsProvider({
      type: "credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        const { username, password } = credentials as {
          username: string;
          password: string;
        };

        if (!credentials) {
          return null;
        }

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

          if (response?.data) {
            const userToken = response.data.userToken;
            const userRefreshToken = response.data.userRefreshToken;

            // 解码访问令牌以获取用户信息
            const user: jwtDecodedAttributes = jwt_decode(userToken);

            // 返回一个用户对象，其中包含访问令牌和刷新令牌
            // 这些信息将传递给jwt回调
            return {
              id: user.userId, // NextAuth要求id字段
              name: user.username,
              role: user.role,
              profilepicture: user.profilepicture,
              iat: user.iat,
              exp: user.exp,
              username: user.username,
              token: userToken, // 存储访问令牌
              email: user.email,
              userId: user.userId,
              refresh: userRefreshToken, // 存储刷新令牌
            };
          }
        } catch (error) {
          console.error("认证失败:", error);
          // 在生产环境中，应避免将详细错误信息暴露给客户端
        }
        return null; // 认证失败
      },
    }),
  ],
  pages: {
    signIn: "/login", // 自定义登录页面路径
  },
  // ... 其他配置
};

export default NextAuth(authOptions);

// ... authOptions 配置继续
callbacks: {
  async jwt({ token, user }) {
    // 首次登录时 (user 对象存在)
    if (user) {
      // 将authorize函数返回的用户数据合并到token中
      // token对象将包含id, name, role, token, refresh等
      return { ...token, ...user };
    }
    // 后续请求，user对象不存在，直接返回现有token
    return token;
  },
  // ... 其他回调
}
// ... authOptions 配置结束

// ... authOptions 配置继续
callbacks: {
  // ... jwt 回调
  async session({ session, token }) {
    // 将JWT token中的所有数据赋值给session.user
    // 这样客户端就可以通过session.user.token访问访问令牌
    session.user = token as any; // 类型断言以避免TS错误，实际应定义更精确的类型
    return session;
  },
}
// ... authOptions 配置结束

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

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

  if (status === "loading") {
    return <p>加载会话中...</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1624">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d995a3e16812.png" alt="NameGPT">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1624">NameGPT</a>
                            <p>免费的名称生成器，AI驱动在线生成企业名称及Logo</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="NameGPT">
                                <span>119</span>
                            </div>
                        </div>
                        <a href="/ai/1624" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="NameGPT">
                        </a>
                    </div>
                ;
  }

  if (status === "authenticated") {
    // 访问令牌现在可以通过data?.user?.token获取
    const accessToken = data?.user?.token;
    console.log("访问令牌:", accessToken);

    // 您可以使用此令牌发起受保护的API请求
    // 例如: axios.get('/api/protected', { headers: { Authorization: `Bearer ${accessToken}` } })

    return <p>欢迎，{data?.user?.name}！您已登录。</p>;
  }

  return <p>请登录。</p>;
}

export default ProtectedComponent;