Next.js SSR场景下如何获取localStorage中的access_token调用API

核心思路：SSR环境无法访问localStorage，因此需要将access_token同时存入Cookie（服务端可通过请求头获取Cookie），并调整API调用逻辑，让服务端能传入从Cookie解析出的token。

1. 补充登录逻辑：将access_token同步存入Cookie #

登录成功后，除了写入localStorage，还要把access_token写入Cookie，确保服务端能获取到：

// 登录成功后的处理代码示例
const authResponse = await loginApi(loginParams);
const authData = { access_token: authResponse.access_token };

// 存入localStorage
localStorage.setItem('auth', JSON.stringify(authData));
// 存入Cookie，可根据实际需求调整过期时间、domain等参数
document.cookie = `access_token=${authData.access_token}; path=/; max-age=86400; SameSite=Lax; secure=${process.env.NODE_ENV === 'production'}`;

2. 修改getServerSideProps：从请求Cookie中解析access_token #

先安装cookie库用于解析Cookie（npm install cookie），然后在服务端逻辑中获取token并传入API调用：

AddressPage.component.tsx

import React from "react";
import { get } from "@/services/http-apis";
import cookie from 'cookie'; // 引入cookie解析库

// 修正原代码中重复声明的props参数
const AddressPage = ({ addressListSSR, isUserLoggedInSSR }: any) => {
  return (
    <div>
      {isUserLoggedInSSR ? (
        addressListSSR.length ? 
          addressListSSR.map(item => <div key={item.id}>{item.detail}</div>) : 
          '暂无地址数据'
      ) : '请先登录'}
    </div>
  );
};

export const getServerSideProps = async (context: any) => {
  let addressListSSR = [];
  let isUserLoggedInSSR = false;

  try {
    // 从请求头中解析Cookie
    const cookies = cookie.parse(context.req.headers.cookie || '');
    const accessToken = cookies.access_token;

    if (accessToken) {
      isUserLoggedInSSR = true;
      // 调用get方法时传入带token的请求头
      const res = await get(`/api/v1/address`, {
        Authorization: `Bearer ${accessToken}`
      });
      // 解析fetch返回的响应数据
      const data = await res.json();
      addressListSSR = data || [];
    }
  } catch (error) {
    console.error("获取地址列表失败:", error);
  }

  return {
    props: {
      addressListSSR,
      isUserLoggedInSSR,
    },
  };
};

export default AddressPage;

3. 修改http-apis.js：适配服务端/客户端的API调用逻辑 #

让get函数支持接收外部传入的请求头，服务端调用时传入从Cookie拿到的token，客户端则保留从localStorage获取token的逻辑：

http-apis.js

import { api } from "../config/config";
const { baseURL: BASE_URL } = api;

// 新增customHeaders参数，用于服务端传入自定义请求头
export const get = async (url = '', customHeaders = {}) => {
  try {
    const URL = `${BASE_URL}${url}`;
    const ISSERVER = typeof window === "undefined";
    // 合并默认请求头与外部传入的请求头
    const headers = {
      "Content-Type": "application/json",
      ...customHeaders
    };

    if (!ISSERVER) {
      // 客户端环境：从localStorage读取token
      const auth = localStorage.getItem("auth");
      const { access_token } = JSON.parse(auth || "{}") || {};
      if (access_token) {
        headers["Authorization"] = `Bearer ${access_token}`;
      }
    }

    const response = await fetch(URL, {
      method: "GET",
      mode: "cors",
      headers,
    });

    return response;
  } catch (error) {
    throw error;
  }
};

关键说明 #

• Cookie是SSR环境下服务端能获取用户认证信息的唯一途径，因此必须将token同步存入Cookie。
• 服务端调用API时，直接从请求Cookie中解析token并传入API函数；客户端仍保留从localStorage取token的逻辑，确保客户端路由跳转时的API调用正常。

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