面试题：SvelteKit路由与状态管理的复杂场景应用

Question

假设你正在开发一个多页面的SvelteKit应用，其中涉及用户登录状态管理，不同权限用户看到不同的路由内容。请详细描述如何结合SvelteKit路由与状态管理来实现该功能，包括如何处理路由守卫、状态持久化以及权限验证的逻辑，同时给出关键代码片段。

Answer 1

1. 路由守卫

SvelteKit 没有内置像 Vue Router 那样的专门路由守卫功能，但可以通过 hooks 来实现类似效果。在 src/hooks.server.js 文件中定义服务器端钩子函数。

// src/hooks.server.js
import { redirect } from '@sveltejs/kit';

export async function handle({ event, resolve }) {
    const session = event.locals.session;
    const { pathname } = event.url;

    // 检查是否登录，未登录时重定向到登录页
    if (!session && pathname.startsWith('/protected')) {
        throw redirect(302, '/login');
    }

    // 检查权限，例如管理员权限才能访问 /admin 相关路由
    if (session && session.role!== 'admin' && pathname.startsWith('/admin')) {
        throw redirect(302, '/');
    }

    return resolve(event);
}

2. 状态管理

使用 Svelte 的响应式变量和存储来管理用户登录状态。可以创建一个 stores.js 文件来存放状态相关逻辑。

// src/stores.js
import { writable } from'svelte/store';

// 创建一个可写存储来管理用户登录状态
export const userStore = writable(null);

// 模拟登录函数，更新用户存储
export const login = (user) => {
    userStore.set(user);
};

// 模拟登出函数，清除用户存储
export const logout = () => {
    userStore.set(null);
};

3. 状态持久化

可以使用 localStorage 或 cookie 来实现状态持久化。在 src/hooks.server.js 中处理 session 相关逻辑，从 cookie 中读取用户登录信息并设置到 event.locals 中。

// src/hooks.server.js
import { redirect } from '@sveltejs/kit';
import cookie from 'cookie';

export async function handle({ event, resolve }) {
    const cookies = cookie.parse(event.request.headers.get('cookie') || '');
    const user = cookies.user;

    if (user) {
        event.locals.session = { user };
    }

    const { pathname } = event.url;

    if (!event.locals.session && pathname.startsWith('/protected')) {
        throw redirect(302, '/login');
    }

    if (event.locals.session && event.locals.session.role!== 'admin' && pathname.startsWith('/admin')) {
        throw redirect(302, '/');
    }

    return resolve(event);
}

4. 权限验证逻辑

在路由组件中，可以根据用户存储中的角色信息来决定显示哪些内容。

<!-- src/routes/protected/+page.svelte -->
<script>
    import { userStore } from '$lib/stores';
    const user = $userStore;
</script>

{#if user}
    {#if user.role === 'admin'}
        <p>这是管理员内容</p>
    {:else}
        <p>这是普通用户内容</p>
    {/if}
{:else}
    <p>请先登录</p>
{/if}

通过以上步骤，可以结合 SvelteKit 路由与状态管理实现用户登录状态管理、不同权限用户看到不同路由内容，同时处理好路由守卫、状态持久化以及权限验证逻辑。