NextJS对接自定义REST认证服务时getServerSideProps的使用问题

核心问题前提说明 #

getServerSideProps 运行在Next.js服务端，和客户端运行时的内存空间完全隔离，你存在客户端状态里的访问令牌无法直接传递给服务端的getServerSideProps，这是你之前尝试失败的根本原因。

预渲染实现方案 #

如果需要在getServerSideProps中拉取用户数据实现SSR预渲染，最优方案是将访问令牌也存入httpOnly Cookie，你可以直接在getServerSideProps中解析请求携带的Cookie拿到令牌，再请求用户数据返回给页面，示例代码如下：

import { parse } from 'cookie';

export async function getServerSideProps(context) {
  // 解析请求头中的Cookie
  const cookies = parse(context.req.headers.cookie || '');
  const accessToken = cookies.access_token;

  // 无访问令牌时跳转登录页
  if (!accessToken) {
    return {
      redirect: {
        destination: '/login',
        permanent: false
      }
    };
  }

  // 携带令牌请求自定义用户接口
  const userResp = await fetch('你的自定义用户数据接口地址', {
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  });

  // 令牌失效时处理逻辑
  if (!userResp.ok) {
    return {
      redirect: {
        destination: '/login',
        permanent: false
      }
    };
  }

  const userData = await userResp.json();
  // 将用户数据作为props传递给页面组件
  return {
    props: { userData }
  };
}

如果你不想将访问令牌存入Cookie，只能放弃SSR预渲染，改用客户端渲染：页面先渲染骨架屏，在客户端useEffect中读取内存里的访问令牌再请求用户数据，该方案无法享受SSR带来的首屏提速、SEO优化优势。

双httpOnly Cookie方案的安全性 #

你描述的配置是安全的，完全可以落地：

• 两个Cookie都设置httpOnly属性，可避免XSS攻击窃取令牌
• 配置SameSite=Strict可彻底规避CSRF风险，跨站请求不会携带对应Cookie
• 刷新令牌Cookie单独设置path=/refresh-token，可最大程度缩小刷新令牌的暴露范围
  额外可以将访问令牌的有效期设置为15分钟以内，进一步降低令牌泄露的影响范围。

next-auth对接可行性说明 #

对接next-auth是完全可行且合理的方案，你不需要修改现有自定义认证服务的逻辑：

• 可通过next-auth提供的Credentials自定义认证提供者，将你现有登录校验、令牌获取、令牌刷新逻辑全部集成进去
• 集成后可直接使用next-auth封装好的getServerSession等方法在getServerSideProps中快速获取用户会话信息，不需要自己手动解析Cookie、处理令牌失效刷新逻辑
• 后续如果需要扩展第三方登录等能力，也不需要做大量改造
  如果你不想引入额外依赖，自己手动实现双Cookie的令牌管理逻辑也完全没问题，可根据项目的复杂度和后续扩展需求选择方案。

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