SvelteKit如何在组件挂载前执行代码？拦截已登录用户访问登录页

组件内直接初始化判断（同步场景） #

把登录判断逻辑直接放在脚本顶层，不用onMount——脚本顶层代码会在组件实例创建后、DOM挂载前执行，完全不会出现表单闪屏：

<script>
    // 直接在这里执行判断，早于组件挂载
    if (isUserLoggedIn()) {
        goto("/pos");
    }

    // 组件其他逻辑
</script>

<!-- 登录表单内容 -->

路由层面拦截（推荐，支持异步场景） #

如果是SvelteKit项目，更推荐在路由的load函数里处理，这是页面渲染前的最早拦截点，连组件都不会加载：

客户端路由拦截（+page.js） #

import { redirect } from '@sveltejs/kit';

export function load() {
    if (isUserLoggedIn()) {
        throw redirect(302, '/pos');
    }
}

服务端路由拦截（+page.server.js，适合需要从服务端验证登录状态的场景） #

import { redirect } from '@sveltejs/kit';

export async function load({ cookies }) {
    // 比如从cookie或数据库验证登录状态
    const user = await verifyUserSession(cookies.get('session_id'));
    if (user) {
        throw redirect(302, '/pos');
    }
}

这种方式下，只要用户已登录，浏览器会直接收到重定向响应，完全不会加载登录页的任何内容，彻底解决闪屏问题。

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