SvelteKit保护路由时出现localStorage is not defined错误求助

云上老周

2026-7-27

解决SvelteKit路由保护中localStorage未定义的问题

错误原因

+layout.server.ts是服务器端运行的代码，而localStorage是浏览器客户端专属的API，服务器环境中不存在这个对象，因此会抛出ReferenceError: localStorage is not defined。

解决方案

根据你的需求，有两种可行的实现方式：

方案一：客户端路由保护（使用`+layout.ts`）

将路由保护逻辑放在客户端执行，通过+layout.ts（而非+layout.server.ts）实现，同时判断浏览器环境避免服务器端报错：

import { redirect } from "@sveltejs/kit";
import type { LayoutLoad } from "./$types";

export const load: LayoutLoad = async ({ url }) => {
  // 仅在浏览器环境中执行判断
  if (typeof window !== "undefined") {
    const authToken = localStorage.getItem('auth_token');
    // 排除登录页面，防止循环重定向
    if (!authToken && url.pathname !== '/') {
      throw redirect(303, '/');
    }
  }
};

方案二：服务器端路由保护（推荐，使用Cookie存储Token）

如果需要更安全的服务器端验证，建议将auth_token存储在HttpOnly Cookie中，这样服务器端可以通过cookies对象读取并验证：

import { redirect } from "@sveltejs/kit";
import type { LayoutServerLoad } from "./$types";

export const load: LayoutServerLoad = async ({ cookies, url }) => {
  const authToken = cookies.get('auth_token');
  // 排除登录页面，防止循环重定向
  if (!authToken && url.pathname !== '/') {
    throw redirect(303, '/');
  }

  // 可选：验证Token有效性，将用户信息挂载到locals供组件使用
  return {
    user: authToken ? /* 这里添加Token验证逻辑，返回用户数据 */ null : null
  };
};