SvelteKit如何用localStorage保护路由？遇localStorage未定义问题

问题核心：+page.ts的load函数默认在服务器端执行，而localStorage是浏览器专属的API，服务器环境没有这个对象，直接调用就会报错。下面是具体的解决思路和修改方案：

方案1：仅在浏览器环境执行localStorage相关逻辑 #

SvelteKit提供了browser变量来区分当前环境，用它包裹所有依赖localStorage的代码即可：

修改+page.ts代码： #

import type { PageLoad } from "./$types"
import { redirect } from "@sveltejs/kit";
import axios from 'axios';
import { browser } from '$app/environment';

// 仅在浏览器中注册axios拦截器
if (browser) {
  axios.interceptors.request.use(function (config) {
      let authToken = localStorage.getItem('auth_token');

      if (authToken !== null) {
          config.headers.Authorization = 'Bearer ' + authToken;
      }

      config.headers["Content-Type"] = "application/json";

      return config;
  });
}

// 服务器端无法获取localStorage，路由保护逻辑交给客户端处理
export const load: PageLoad = async () => {};

在+page.svelte中实现客户端路由保护： #

<script>
  import { onMount } from 'svelte';
  import axios from 'axios';

  onMount(async () => {
    const authToken = localStorage.getItem('auth_token');
    
    // 无token直接跳转登录页
    if (!authToken) {
      window.location.href = '/';
      return;
    }

    // 验证token有效性
    try {
      await axios.get(import.meta.env.VITE_API_URL + '/auth/me');
    } catch (error) {
      localStorage.removeItem('auth_token');
      window.location.href = '/';
    }
  });
</script>

方案2：禁用当前页面的SSR（简单但牺牲SSR优势） #

如果你的页面不需要服务器端渲染的性能和SEO优势，可以直接在+page.ts顶部禁用SSR，让整个页面在客户端运行，这样就能直接使用localStorage：

import type { PageLoad } from "./$types"
import { redirect } from "@sveltejs/kit";
import axios from 'axios';

// 禁用SSR，页面全程在客户端执行
export const ssr = false;

axios.interceptors.request.use(function (config) {
    let authToken = localStorage.getItem('auth_token');

    if (authToken !== null) {
        config.headers.Authorization = 'Bearer ' + authToken;
    }

    config.headers["Content-Type"] = "application/json";

    return config;
});

export const load: PageLoad = async () => {
    if (localStorage.getItem('auth_token') === null) {
        throw redirect(302, '/')
    }
    try {
      await axios.get(import.meta.env.VITE_API_URL + '/auth/me');
    } catch (error) {
        localStorage.removeItem('auth_token')
        throw redirect(302, '/')
    }
}

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