在SvelteKit的load函数中使用Directus SDK出现500错误求助

问题核心 #

前端onMount代码会等待登录完成后再调用API，但迁移到+page.server.ts的服务端load函数后，缺失了登录状态校验逻辑，同时服务端的Directus客户端初始化逻辑和前端不匹配，导致API调用失败。

具体修复步骤 #

1. 补全服务端的初始化等待逻辑
   前端代码里通过循环等待loginCompleteValue确保登录完成，但服务端load函数直接调用client.request，如果initLogin未完成，客户端处于未认证状态会触发权限错误。在load函数里先完成初始化：

   export async function load() {
       // 先等待initLogin执行完成
       await initLogin();
       // 若initLogin无法直接await，可模拟前端的等待逻辑
       let loginCompleteValue = false;
       while (!loginCompleteValue) {
           await new Promise(resolve => setTimeout(resolve, 1000));
           // 从initLogin的状态变量中获取登录完成标识
       }
   
       // 后续API调用代码...
   }
   

2. 修正load函数的返回格式
   SvelteKit服务端load函数不需要嵌套props字段，错误的返回格式会导致页面解析失败：

   // 错误写法
   return {
       props: { landingPageData }
   };
   
   // 正确写法
   return {
       landingPageData,
       projectData,
       clientprojectData,
       blogData
   };
   

3. 改用服务端专用的Directus客户端
   前端客户端依赖浏览器存储（比如localStorage存用户token），服务端环境无法访问这些资源。建议创建服务端专属客户端，使用Directus后台生成的静态token认证：

   // $lib/config/server-directus.ts
   import { createDirectus, rest, staticToken } from '@directus/sdk';
   
   export const serverClient = createDirectus(import.meta.env.VITE_DIRECTUS_URL)
       .with(rest())
       .with(staticToken(import.meta.env.VITE_DIRECTUS_SERVER_TOKEN));
   

   然后在+page.server.ts中导入该客户端：

   import { serverClient } from "$lib/config/server-directus";
   // 后续用serverClient.request(...)调用API
   

4. 调试具体错误信息
   在catch块输出完整错误详情（服务端日志看终端输出，而非浏览器控制台），方便定位问题：

   catch (error) {
       console.error('SSR数据获取错误:', error);
       // 开发环境返回具体错误信息
       return {
           status: 500,
           error: new Error(`数据获取失败: ${(error as Error).message}`)
       };
   }
   

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