SvelteKit Hook中无法访问localStorage的问题排查

核心原因 #

你遇到的localStorage is not defined错误，本质是你的handle Hook在服务端环境执行了，而localStorage是浏览器专属的API，服务端（Node.js环境）根本没有这个对象。

当你让isUserLoggedIn直接返回布尔值时，代码没碰localStorage，服务端执行这段逻辑不会报错；但一旦调用读取localStorage的代码，就会触发未定义错误，返回500状态码。

解决办法 #

1. 先判断运行环境再访问localStorage #

修改isUserLoggedIn函数，先检查是否处于浏览器环境（即是否存在window对象），再去读取localStorage：

function isUserLoggedIn() {
  // 服务端环境直接返回未登录（或根据业务需求调整）
  if (typeof window === 'undefined') {
    return false;
  }
  const token = localStorage.getItem('authToken');
  // 有令牌则视为已登录
  return !!token;
}

2. 确保权限控制逻辑仅在客户端执行 #

如果你的项目用了SSR/SSG框架（比如Next.js、Nuxt.js），要注意：

• 服务端组件/服务端Hook不能调用浏览器API，把需要用到localStorage的权限控制逻辑移到客户端组件中（比如Next.js里加'use client'指令）。
• 可以在客户端的useEffect钩子中执行权限判断，再进行页面跳转，避免服务端执行时触发错误。

3. 避免在服务端初始化阶段调用Hook #

如果你的handle Hook是框架生命周期的一部分，要确认它的执行时机——不要在服务端初始化页面的阶段调用，只在客户端渲染完成后执行。

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