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 }，其中 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

SvelteKit：运行路由更改时的功能（对于访问令牌，无需在布局文件中执行）

SvelteKit: Run function at route change (for access token, without doing it at a layout file)

routes

access-token

svelte

sveltekit

SvelteKit：运行 路由更改时的功能（对于访问令牌，无需在布局文件中执行）

SvelteKit: Run function at route change (for access token, without doing it at a layout file)

routes

access-token

svelte

sveltekit

SvelteKit：运行路由更改时的功能（对于访问令牌，无需在布局文件中执行）