Astro.js 通过 jwt 和 store 实现身份验证

Question

我有一个 spring boot 后端，可以在登录时发送 jwt 令牌。我需要在我的 Astro 前端实现这些功能：

• 如果在本地存储中找不到令牌，则重定向到 /login
• 登录时从服务器响应中检索令牌并将其存储在本地存储中
• 如果发送到服务器的任何请求返回 401（未授权），这意味着令牌已过期或不正确 -> 从本地存储中删除令牌并重定向到 /login
• token 应该与标头中的每个请求一起发送：授权：Bearer

几乎没有专门针对 Astro 的文档。我已经使用存储和突变在我的旧 vue 项目中实现了同样的事情，但是我没有发现任何与 astro 远程相似的东西。这是我指的项目文件：https://github.com/salat-23 /wafflesproject-frontend/blob/master/src/store/index.js

附言我不是前端开发人员，也不了解很多东西，所以任何帮助和提示都将不胜感激！

Answer 1

我在 Astro 项目中使用 ServiceWorkers 实现了基于令牌的身份验证。

使用 ServiceWorker，您将能够创建一个获取事件处理程序，该处理程序将为您的前端发送的每个请求调用。在此处理程序中，您可以重定向、添加身份验证标头和存储令牌。

由于Astro 是一个多页面应用程序框架，这是我所知道的解决您问题的唯一方法。 基于令牌的身份验证更容易在像 NuxtJS

这样的单页应用程序中实现

这是我的 Astro 项目的 ServiceWorker。