如何在NextJS中处理OAuth2？Access/Refresh Token存储方案咨询

开发者阿泽

2026-8-3

处理OAuth Access Token和Refresh Token的最佳实践及前端传递方案

你的存储方案本身是合理的：

将refresh token存在HttpOnly Cookie中，能有效避免XSS攻击窃取令牌，同时结合Secure、SameSite=Strict/Lax属性还能降低CSRF风险
将access token存在sessionStorage中，适合短期会话场景，关闭浏览器后令牌自动清除，减少持久化存储的安全隐患

关于后端如何传递access token到前端

不存在res.setSessionStorage这类直接操作前端存储的后端API——前端存储是浏览器端的私有存储，后端无法直接修改。常用的传递方案有以下几种：

1. 返回JSON响应让前端自行存入sessionStorage

调整第三方回调的后端接口逻辑：当后端拿到第三方返回的access token和refresh token后，先通过res.setHeader设置好存储refresh token的HttpOnly Cookie，然后直接返回包含access token的JSON响应。

示例后端代码（Node.js/Express）：

app.get('/api/login', async (req, res) => {
  const code = req.query.code;
  // 调用第三方接口获取token
  const tokenData = await fetchThirdPartyToken(code);
  
  // 设置HttpOnly Cookie存储refresh token
  res.cookie('refresh_token', tokenData.refresh_token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // 生产环境开启Secure
    sameSite: 'Strict',
    maxAge: tokenData.refresh_expires_in * 1000
  });
  
  // 返回access token给前端
  res.json({
    access_token: tokenData.access_token,
    token_type: tokenData.token_type,
    expires_in: tokenData.expires_in
  });
});

前端收到响应后，手动将access token存入sessionStorage：

// 前端登录回调页面的请求逻辑
fetch('/api/login?code=' + code)
  .then(res => res.json())
  .then(data => {
    sessionStorage.setItem('access_token', data.access_token);
    // 跳转到应用首页
    window.location.href = '/';
  });

2. 重定向时将access token放在查询参数中

后端设置好refresh token的Cookie后，重定向到前端页面并在URL查询参数中携带access token。注意：这种方式要确保全站使用HTTPS，避免令牌在传输过程中被窃听，且URL可能会被浏览器历史记录、服务器日志留存，只适合对安全要求不极高的场景。

示例后端代码：

app.get('/api/login', async (req, res) => {
  const code = req.query.code;
  const tokenData = await fetchThirdPartyToken(code);
  
  // 设置refresh token Cookie
  res.cookie('refresh_token', tokenData.refresh_token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'Strict',
    maxAge: tokenData.refresh_expires_in * 1000
  });
  
  // 重定向到前端首页并携带access token
  res.redirect(`/?access_token=${tokenData.access_token}&expires_in=${tokenData.expires_in}`);
});

前端页面加载时读取URL参数并存入sessionStorage：

// 前端首页逻辑
const urlParams = new URLSearchParams(window.location.search);
const accessToken = urlParams.get('access_token');
if (accessToken) {
  sessionStorage.setItem('access_token', accessToken);
  // 清除URL中的token参数，避免暴露在地址栏
  window.history.replaceState({}, document.title, window.location.pathname);
}

3. 后端渲染页面时注入全局变量

如果你的应用是服务端渲染（SSR），可以在渲染前端页面时，将access token注入到页面的全局JavaScript变量中，前端再读取该变量存入sessionStorage。

示例后端模板代码（EJS为例）：

<script>
  window.__INITIAL_ACCESS_TOKEN__ = '<%= accessToken %>';
  window.__INITIAL_EXPIRES_IN__ = <%= expiresIn %>;
</script>

前端逻辑：

if (window.__INITIAL_ACCESS_TOKEN__) {
  sessionStorage.setItem('access_token', window.__INITIAL_ACCESS_TOKEN__);
  // 清空全局变量避免暴露
  delete window.__INITIAL_ACCESS_TOKEN__;
}

额外的最佳实践提醒

所有请求必须使用HTTPS，防止令牌在传输过程中被中间人攻击窃取
前端每次调用需要授权的API时，在请求头中携带access token：Authorization: Bearer ${accessToken}
实现access token自动刷新逻辑：在access token过期前，前端调用后端的refresh接口，后端读取Cookie中的refresh token向第三方换取新的access token，再返回给前端更新sessionStorage中的令牌
给refresh token的Cookie设置合理的过期时间，不要过长，降低令牌泄露后的风险

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