时间戳

首页 > 解决方案 > SvelteKit：如何添加全局错误 401 处理？

sveltekit - SvelteKit：如何添加全局错误 401 处理？

问题描述

如何全局处理来自外部API 的 401 错误？

首先，我的设置：

  1. 当用户登录时，我设置了一个jwtcookie，将一个jwt属性写入session存储（从$app/stores），然后重定向到网站的受保护部分。
  2. 在hooks.js我有一个handle基本上可以做的函数request.locals.jwt = cookies.jwt，然后是一个getSession返回的函数{ jwt: locals.jwt }
  3. 在我在受保护页面上发出的每个fetch请求中，我都会访问并使用session.jwt将令牌发送到 API。

整个设置有效。如果用户注销，我可以写一个空的 JWT cookie 并清除$session.jwt值，重定向回主页，完成。

但是我看不到添加全局 401 处理程序的方法吗？我想要做的是清除 JWT cookie 并重定向到登录页面。在根目录中执行此__error.svelte操作似乎是显而易见的地方，但如果在 SSR 期间触发错误，那么显然我无法对 cookie 执行任何操作，并且__error.svelte不会再次运行 where browseris true。

标签： sveltekit

解决方案

建议：为您的令牌使用仅 HTTP cookie（可选，但可能更好）

中__layout.svelte，我们有

<script lang="ts" context="module">
  import { isPublic, isAuthenticated } from '$lib/auth/auth0_front';
  import type { Load } from '@sveltejs/kit';

  export const load: Load = async ({ page, session }) => {
    if (!isPublic(page.path) && !isAuthenticated(session)) {
      console.log('Unauthorized access to private page');
      return { redirect: '/', status: 302 };
    } else {
      console.log('Auth OK');
    }
    return {};
  };
</script>

在前端，我们使用原生 fetch 的小包装器，通过将页面重定向到主页或登录页面来处理 401 响应。

推荐阅读