Next.js中授权令牌处理方案咨询（非Context/Redux方式）

你提到的问题确实是Next.js SSR模式下的常见痛点——服务器端不存在window对象，直接照搬CRA的写法肯定会报错。除了React Context或Redux，这里有几个更轻量、易上手的实现方式：

1. 客户端组件中封装自定义Hook管理令牌（推荐） #

Next.js 13+引入的客户端组件（通过'use client'指令标记）完全在浏览器端渲染，能安全访问window和localStorage。你可以封装一个极简的Hook来统一令牌的读取和更新：

'use client';

import { useState, useEffect } from 'react';

export function useToken() {
  const [token, setToken] = useState(null);

  // 组件挂载时从localStorage读取令牌
  useEffect(() => {
    const storedToken = window.localStorage.getItem('token');
    if (storedToken) setToken(storedToken);
  }, []);

  // 更新令牌并同步到localStorage
  const updateToken = (newToken) => {
    setToken(newToken);
    newToken 
      ? window.localStorage.setItem('token', newToken) 
      : window.localStorage.removeItem('token');
  };

  return { token, updateToken };
}

使用时直接在客户端组件中导入即可：

'use client';

import { useToken } from '@/hooks/useToken';

export default function ProtectedPage() {
  const { token, updateToken } = useToken();

  // 示例：登录成功后更新令牌
  const handleLogin = (newToken) => {
    updateToken(newToken);
  };

  if (!token) return <div>请先登录</div>;

  return <div>已授权，当前令牌：{token}</div>;
}

2. 封装环境判断工具函数 #

如果需要在通用工具文件中访问令牌，可以先判断当前是否处于浏览器环境，避免SSR报错：

// utils/token.js
export const getToken = () => {
  // 只在浏览器环境读取localStorage
  if (typeof window !== 'undefined') {
    return window.localStorage.getItem('token');
  }
  return null;
};

export const setToken = (token) => {
  if (typeof window !== 'undefined') {
    token 
      ? window.localStorage.setItem('token', token) 
      : window.localStorage.removeItem('token');
  }
};

注意：这个方法在服务器端调用会返回null，所以如果在SSR组件中使用，要放在useEffect这类客户端生命周期钩子内。

3. 用Cookie存储令牌（适合服务端需访问的场景） #

如果你的业务需要在服务器端（比如API路由、SSR页面）也能读取令牌，把令牌存在Cookie里会更合适。可以用js-cookie简化操作：

首先安装依赖：

npm install js-cookie

然后封装工具函数：

// utils/cookieToken.js
import Cookies from 'js-cookie';

export const getCookieToken = () => Cookies.get('token');
export const setCookieToken = (token) => Cookies.set('token', token, { expires: 7 }); // 有效期7天
export const removeCookieToken = () => Cookies.remove('token');

客户端组件中直接调用工具函数，服务端则可以通过req.cookies读取：

// app/api/protected/route.js
export async function GET(req) {
  const token = req.cookies.token;
  if (!token) return new Response('未授权', { status: 401 });
  
  // 令牌验证逻辑...
  return new Response('授权成功', { status: 200 });
}

这种方式兼顾了客户端和服务端的令牌访问需求，适合需要SSR渲染授权内容的场景。

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