SvelteKit中Auth.js与Graph SDK：认证及API调用位置选型

核心分工原则 #

• 路由权限拦截：用hooks.server.js做全局/特定路由的认证校验，仅负责判断用户是否有权限访问路由，不处理具体API调用逻辑。
• API业务逻辑：Graph SDK的初始化与API调用放在+page.server.js或+layout.server.js中，按需选择：
  • 单页面专属的API调用：放在对应页面的+page.server.js，逻辑更聚焦，便于维护。
  • 多页面共享的API逻辑：放在+layout.server.js初始化Client，通过load函数将Client或API结果传递给所有子页面，避免重复初始化。

具体实现示例 #

1. hooks.server.js：仅做路由守卫 #

export async function handle({ event, resolve }) {
  const session = await event.locals.getSession();
  // 拦截受保护路由，比如以/protected开头的路径
  if (event.url.pathname.startsWith('/protected') && !session) {
    return new Response(null, {
      status: 302,
      headers: { Location: '/login' }
    });
  }
  return resolve(event);
}

2. +page.server.js：单页面API调用 #

import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import { getToken } from '@auth/core/jwt';
import { redirect } from '@sveltejs/kit';

export async function load({ locals }) {
  const session = await locals.getSession();
  if (!session) throw redirect(302, '/login');

  // 获取Graph API访问令牌
  const token = await getToken({
    session,
    token: 'accessToken',
    scopes: ['User.Read'] // 按需添加所需权限
  });

  // 初始化Graph Client
  const client = Client.initWithMiddleware({
    authProvider: new TokenCredentialAuthenticationProvider({
      getToken: async () => ({ token: token })
    })
  });

  // 调用Graph API示例
  const userInfo = await client.api('/me').get();
  return { userInfo };
}

3. +layout.server.js：多页面共享Client/数据 #

如果多个页面都需要使用Graph Client，可在根布局的+layout.server.js中初始化，子页面通过data获取：

// 初始化逻辑和+page.server.js类似，返回Client或共享数据
export async function load({ locals }) {
  const session = await locals.getSession();
  if (!session) throw redirect(302, '/login');

  const token = await getToken({
    session,
    token: 'accessToken',
    scopes: ['User.Read']
  });

  const graphClient = Client.initWithMiddleware({
    authProvider: new TokenCredentialAuthenticationProvider({
      getToken: async () => ({ token: token })
    })
  });

  return { graphClient };
}

关键注意事项 #

• 不要在hooks.server.js中处理API调用：hooks是全局请求中间件，职责是路由拦截，在此处耦合API逻辑会增加调试难度，且无法直接将API数据传递给页面组件。
• +layout.server.js完全可行：适合全局共享的场景（如导航栏显示用户信息），能减少重复代码，提升效率。

内容的提问来源于stack exchange，提问作者ABär