Next.js中Utils模块localStorage未定义：加密存储数据报错求助

API 探路者

2026-7-5

问题分析

报错localStorage is not available: ReferenceError: localStorage is not defined的核心原因是：localStorage是浏览器专属的API，你的代码在非浏览器环境（比如服务端渲染SSR、Node.js环境）执行时，该对象不存在，直接调用就会抛出错误。

解决方案

修改代码，先判断当前环境是否为浏览器（即是否存在window对象），仅在浏览器环境下初始化secureLocalStorage：

import SecureStorage from 'secure-web-storage'
import CryptoJS from 'crypto-js'

const SECRET_KEY = process.env.REACT_APP_SECRET_KEY

let secureLocalStorage = null

// 先校验是否处于浏览器环境
if (typeof window !== 'undefined' && window.localStorage) {
  try {
    secureLocalStorage = new SecureStorage(window.localStorage, {
      hash: function hash(key) {
        key = CryptoJS.SHA256(key, SECRET_KEY).toString()
        return key
      },
      encrypt: function encrypt(data) {
        data = CryptoJS.AES.encrypt(data, SECRET_KEY).toString()
        return data
      },
      decrypt: function decrypt(data) {
        try {
          data = CryptoJS.AES.decrypt(data, SECRET_KEY).toString(
            CryptoJS.enc.Utf8
          )
          return data
        } catch (error) {
          console.error('Error decrypting data:', error)
          return null
        }
      },
    })
  } catch (error) {
    console.error('localStorage is not available:', error)
  }
}

export default secureLocalStorage

额外优化建议（针对SSR框架）

如果你的项目是Next.js这类服务端渲染框架，还可以通过以下方式进一步适配：