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>

 标签中，should 

$:

 将语句标记为响应式。
因此每次导航时都会执行它。

$: if($navigating) myFunction(); 当然你可以在HTML模板中使用它。

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

有关导航的更多信息：

https://svelte.dev/docs/kit/$app-state#navigating