时间戳

首页 > 解决方案 > SvelteKit：在路由更改时运行功能（对于访问令牌，无需在布局文件中执行）

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

问题描述

我刚从 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 吗？ ...一般来说，检查访问令牌是个好主意吗？

先感谢您

标签： routesaccess-tokensveltesveltekit

解决方案

您可以使用navigating商店。

navigating是一个可读的存储。当导航开始时，它的值是{ from, to }, wherefrom和to都反映了pagestore 的值。导航完成后，其值恢复为null。

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

在<script>标签中，应该$:将声明标记为反应式。因此，每次导航发生时都会执行。

$: if($navigating) myFunction();

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

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

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

推荐阅读