SvelteKit如何在路由切换时全局执行函数（不使用layout文件）

1. SvelteKit原生实现（无需第三方依赖） #

你不需要把逻辑分散到各个业务layout里，SvelteKit原生提供了两个全局钩子可以完全替代Vue的router.beforeEach能力，覆盖所有路由切换场景：

• 服务端侧全局拦截：在src/hooks.server.ts中导出handle钩子，所有服务端处理的请求（包括首次访问、客户端导航的服务端预加载）都会触发这个钩子，示例代码如下：

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { AUTHENTICATION } from '你的auth实例路径';

export const handle: Handle = async ({ event, resolve }) => {
  AUTHENTICATION.default.fetchAccessToken();
  // 可以通过路径匹配或者自定义路由元信息判断是否是受保护路由
  const isProtectedRoute = event.url.pathname.startsWith('/dashboard') || event.route.meta?.protected;
  
  if (isProtectedRoute && !AUTHENTICATION.default.tokenData) {
    return Response.redirect(new URL('/', event.url), 302);
  }

  return resolve(event);
};

• 客户端侧纯前端导航拦截：在根路径的src/routes/+layout.svelte中使用beforeNavigate钩子，这里需要说明：根layout是SvelteKit全局唯一的路由入口，你项目中使用的多个业务子layout都是它的下级节点，逻辑只会执行一次，完全不会和多layout架构冲突，也不需要在多个子layout中重复写代码。示例代码如下：

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { beforeNavigate } from '$app/navigation';
  import { AUTHENTICATION } from '你的auth实例路径';

  beforeNavigate(({ to, cancel }) => {
    AUTHENTICATION.default.fetchAccessToken();
    const isProtectedRoute = to.url.pathname.startsWith('/dashboard');
    if (isProtectedRoute && !AUTHENTICATION.default.tokenData) {
      cancel();
      window.location.href = '/';
    }
  });
</script>

<slot />

2. svelte-routing是否可以实现该需求 #

可以实现，但不推荐。svelte-routing是面向纯客户端Svelte项目的第三方路由库，如果你已经使用SvelteKit，它自带的路由系统已经原生支持SSR、SSG、预加载等全场景能力，额外引入第三方路由库只会增加项目冗余。如果你确实要使用svelte-routing，它本身也提供了和Vue路由几乎一致的beforeEach钩子，用法和你之前写的Vue代码逻辑基本相同。

3. 全局校验access token的合理性 #

从通用业务角度看这个方案是合理的，但要注意几个边界问题：

• 前端的token校验仅做UI层拦截，不能替代后端的权限校验，所有敏感接口后端必须二次校验token有效性，避免前端篡改绕过校验
• 全局校验不要放入过重的逻辑，避免拖慢路由切换的响应速度
• 需要提前排除不需要校验的路由（比如登录页、公开静态页、资源路径等），避免出现无限重定向的问题

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