SvelteKit：在路由更改时运行函数（用于访问令牌，无需在布局文件中执行）

Question

我刚刚开始使用 SvelteKit，我有一个关于函数的问题，该函数应该在每次路线更改时运行。我没有找到太多有用的信息。

只是为了在布局文件中运行它（我不喜欢这样做，因为我可能会使用多个布局文件并且更喜欢一个全局位置。）

在 Vue.js 中，我做了类似的事情，检查每个路由更改是否有访问令牌（在路由器文件的末尾）：

// src/router/index.ts
router.beforeEach((to, from, next) => {
  AUTHENTICATION.default.fetchAccessToken();
  if (to.options.protected && !AUTHENTICATION.default.tokenData) {
    next("/");
  } else next();
});

我如何在 SvelteKit 中实现这一目标？

这可以与SvelteKit 中的 svelte-routing 一起使用吗？ ...检查访问令牌通常是一个好主意吗？

先感谢您

Answer 1

您可以使用navigating商店。

navigating是一个可读的存储。当导航开始时，它的值为{ from, to, type }，其中from和to都镜像page存储值。导航完成后，其值将恢复为null。

import { navigating } from '$app/stores';

在<script>标签中，应该$:将语句标记为反应性的。因此每次导航发生时都会执行它。

$: if($navigating) myFunction();

当然你可以在 HTML 模板中使用它。

{#if $navigating}
    <LoadingIndicator />
{/if}

有关导航的更多信息： https ://kit.svelte.dev/docs#modules-$app-stores