如何在 sveltekit 中保存 JWT？

Posted 2023-03-08

【中文标题】如何在 sveltekit 中保存 JWT？

【英文标题】：How to save JWT in sveltekit?

【发布时间】：2021-12-28 14:35:48

【问题描述】：

作为 sveltekit 的新手，我制作了一个基于 realworldapp 的登录表单，成功登录后会收到 JWT 令牌。

<script context="module">
    export async function load( session ) 
        if (session.user) 
            return 
                status: 302,
                redirect: '/'
            ;
        
        return ;
    
</script>

<script>
    import  session  from '$app/stores';
    import  goto  from '$app/navigation';
    import  post  from '$lib/utils.js';
    import  fade  from 'svelte/transition';
 
 
    let username = '';
    let password = '';
    let errors = null;
    let message = '';
    let hasError = false
    async function submit(event) 
        errors = response.errors;
        if (response.token) 
            $session.access_token = response.token.access_token;
            //how to save this token in a cookie?
            goto('/profile');
         else 
            message= response.message;
            hasError = true
            setTimeout(() => hasError=false, 5000);            
        
    
</script>

        <form  on:submit|preventDefault=submit >
            <h3 class="form-title">Login</h3>
            #if hasError
                <div  transition:fade  class="err-msg">message</div>
            /if 
                <input type="text" bind:value=username  placeholder="username">
                <input type="password" bind:value=password placeholder="password">
              
                <input type="submit"  value="send">
        </form>  

它工作正常，我可以在如下响应中获取令牌：

message: "successully logged in!"
token: access_token: 'eyJhbGciOiJIUzI1....'

现在，我想知道将令牌保存到 cookie 并检索它的安全且惯用的方法是什么，以便 usr 每次打开浏览器时都不需要进行身份验证？

我查看了官方文档，但找不到任何提示。我也找不到关于它的教程中的工作示例。于是就有了这个问题。

【参考方案1】：

您的核心问题是“我如何在 cookie 中保存一个值，然后再检索它？”

Cookies 作为字符串存储在浏览器中，需要解析才能读取或更新。 javascript 中有许多库可以帮助您做到这一点，其中一个流行的库是 js-cookie。虽然您需要库，但您可能会发现它比自己解析字符串更方便。

如何写入和读取 cookie 的基本示例是：

import Cookies from 'js-cookie'


Cookies.set('name', 'value');

Cookies.get('name') // => 'value'

您还可以设置更多选项，例如路径、到期时间等。

【讨论】：

我想安全地做。我在这里读到的是，仅将 jwt 保存在 cookie 中是不够安全的：hasura.io/blog/best-practices-of-using-jwt-with-graphql

任何东西你发送给客户不再是你的控制。无论您是否有意存储它都没有关系，一旦将 JWT 发送到客户端，如果它最终在其他地方结束，则超出您的控制范围。您链接的文章也说了这么多。 JWT 是“承载令牌”，这意味着它旨在与请求一起发送，以“证明”请求来自有效来源。但是，例如，没有什么可以阻止客户与其他人共享他们的令牌。很抱歉成为坏消息的承担者，但这只是事实。