SvelteKit Auth Guard

简介

最近使用sveltekit重构了rhomb笔记项目，发现在使用sveltekit构建SPA（单页应用）时，很难找到一些合适的路由守卫的实现方式。

网上有许多使用cookies的方式，但是随着cookies在浏览器中逐步被限制，还是需要知道如何使用JWT（JSON Web Token）来实现路由守卫。

实现

在sveltekit中，+layout.svelte是一个全局的布局组件，可以在这里实现路由守卫。

<script>
	import { goto } from "$app/navigation";
	import { page } from "$app/stores";

	const UNPROTECTED_PAGES = ["/login", "/signup"];
	const SHARE_PATTERN = /^\/share\/.*/;


	$: if (
		!localStorage.getItem("token") &&
		!UNPROTECTED_PAGES.includes($page.url.pathname) &&
		!SHARE_PATTERN.test($page.url.pathname)
	) {
		goto("/login");
	}
</script>

因为在使用JWT时，我们需要将token保存在localStorage中，所以我们可以通过localStorage.getItem("token")来判断用户是否登录。

默认情况下，我们认为JWT是有效的，只有在localStorage中没有token的情况下，我们才会跳转到登录页面。 这样是一种常用的方式，可以避免每次进入页面都需要验证token的情况。

在这个例子中，我们定义了一个UNPROTECTED_PAGES数组，用于存放不需要路由守卫的页面，比如登录页面和注册页面。

还有一些特殊的页面，比如/share/开头的页面，这些页面是可以被分享的，不需要登录就可以访问。

参考

• SvelteKit
• JWT
• StackOverflow