在svelkit中使用JWT的身份驗證API

Question 1

我無法使用svelte對我的API端點進行身份驗證。出于安全原因，我嘗試使用HTTPonly cookie通過JWT對我的端點進行身份驗證，但是，它不起作用。錯誤：“身份驗證憑據不是provided.”登錄后，我看不到cookie是存儲區。有人能幫忙嗎？

獲取登錄端點的代碼

<script>
    import { goto } from '$app/navigation';

    let username = '';
    let password = '';

    const submit = async () => {
        await fetch('https://myAPI/auth/jwt/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'include',
            body: JSON.stringify({
                username,
                password
            })
        });
     goto('/auth/me');
    };
</script>

我必須說，用戶注冊工作正常

<script>
    import { goto } from '$app/navigation';

    let username = '';
    let password = '';
    let email = '';
    let first_name = '';
    let last_name = '';

    const submitForm = async () => {
        await fetch('https://myAPi/auth/users/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                username,
                password,
                email,
                first_name,
                last_name
            })
        });

        goto('/');
    };
</script>

Question 2

我相信我現在有足夠的元素來提供更準確的答案。

成功登錄后，API返回JWT訪問令牌，但未設置任何包含該令牌的cookie。事實上，您的API根本不依賴于cookie，因為受保護的路由不需要包含JWT令牌的cookie，而是包含令牌的授權頭。

這就是為什么我對你提供你的back-end的詳細實現如此缺乏耐心。

在您跟隨并在評論中鏈接的教程中，作者明確聲明他打算使用cookie進行身份驗證。這一選擇反映在front-end上（通過在fetch中使用credentials: include選項），也反映在back-end上，例如，在他的API的Laravel實現中（第35行），或者在其節點實現中（第40-43)行）。在這兩種情況下，您都可以看到back-end如何顯式設置和返回“jwt”cookie。

當向受保護路由發出請求時，作者還顯式地使用cookie讀回并驗證令牌（例如，請參見上面節點示例中的第52-54行）。

然而，正如我上面所說的，您的API并不依賴于相同的機制，而是希望設置一個“授權”請求頭。

所以你有兩個選擇。更簡單的選擇是調整client-side代碼以使用API提供的Auth機制運行。這意味著將令牌存儲在sessionStorage中，并在向受保護端點發出請求時正確設置授權標頭：

// login.svelte
<script>
    import { goto } from '$app/navigation';

    let username = '';
    let password = '';

    const submit = async () => {
        const result = await fetch('https://myAPI/auth/jwt/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                username,
                password
            })
        });
        const data = await result.json();
        const { refresh, access } = data;
        sessionStorage.setItem('token', access);
        goto('/auth/me');
    };
</script>

// auth/me.svelte
<script>
    import { onMount } from 'svelte';
    
    onMount(async () => {
        // read token from sessionStorage
        const token = sessionStorage.getItem('token');
        const result = await fetch('https://myAPI/auth/users/me', {
            method: 'GET',
            headers: { 
                'Content-Type': 'application/json',
                'Authorization': `JWT ${token}`
            }
        });
        const data = await result.json();
        console.log(data);
    });
</script>

另一種選擇是將API中的身份驗證機制從基于“授權”標頭的機制修改為基于cookie的機制（如果這確實是您想要的），但這會影響依賴于API的其他現有服務（如果有的話）。

Answer 1

我相信我現在有足夠的元素來提供更準確的答案。

成功登錄后，API返回JWT訪問令牌，但未設置任何包含該令牌的cookie。事實上，您的API根本不依賴于cookie，因為受保護的路由不需要包含JWT令牌的cookie，而是包含令牌的授權頭。

這就是為什么我對你提供你的back-end的詳細實現如此缺乏耐心。

在您跟隨并在評論中鏈接的教程中，作者明確聲明他打算使用cookie進行身份驗證。這一選擇反映在front-end上（通過在fetch中使用credentials: include選項），也反映在back-end上，例如，在他的API的Laravel實現中（第35行），或者在其節點實現中（第40-43)行）。在這兩種情況下，您都可以看到back-end如何顯式設置和返回“jwt”cookie。

當向受保護路由發出請求時，作者還顯式地使用cookie讀回并驗證令牌（例如，請參見上面節點示例中的第52-54行）。

然而，正如我上面所說的，您的API并不依賴于相同的機制，而是希望設置一個“授權”請求頭。

所以你有兩個選擇。更簡單的選擇是調整client-side代碼以使用API提供的Auth機制運行。這意味著將令牌存儲在sessionStorage中，并在向受保護端點發出請求時正確設置授權標頭：

// login.svelte
<script>
    import { goto } from '$app/navigation';

    let username = '';
    let password = '';

    const submit = async () => {
        const result = await fetch('https://myAPI/auth/jwt/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                username,
                password
            })
        });
        const data = await result.json();
        const { refresh, access } = data;
        sessionStorage.setItem('token', access);
        goto('/auth/me');
    };
</script>

// auth/me.svelte
<script>
    import { onMount } from 'svelte';
    
    onMount(async () => {
        // read token from sessionStorage
        const token = sessionStorage.getItem('token');
        const result = await fetch('https://myAPI/auth/users/me', {
            method: 'GET',
            headers: { 
                'Content-Type': 'application/json',
                'Authorization': `JWT ${token}`
            }
        });
        const data = await result.json();
        console.log(data);
    });
</script>

另一種選擇是將API中的身份驗證機制從基于“授權”標頭的機制修改為基于cookie的機制（如果這確實是您想要的），但這會影響依賴于API的其他現有服務（如果有的話）。

在svelkit中使用JWT的身份驗證API

熱門問答

如果屬性初始化為公共屬性，但setters和getters將其視為受保護屬性，那么該屬性是否受保護？

如何獲取.NET程序集（類庫）的本機HMODULE？

SQL查詢可以計算包含利息和本金余額的貸款賬戶對賬單嗎？

Ms Exchange Online |傳輸規則中的Regex

將文本的每一行附加為嵌套列表的元素

如何在Spring中創建調用計數器注釋？

當使用`bind`時，如何避免創建過多的函數副本

數字邏輯基礎與verilog設計（加斯蒂芬布朗）第三版習題答案（觸發器，寄存器和計數器）

Java中的封裝是什么意思

在Azure上部署Apache Kafka的最佳實踐是什么

Flask上傳圖片如何縮放尺寸

點擊【改變2】文字變成另外一個數據，點擊【改變】在將原來的數據還原，請問如何實現？

在svelkit中使用JWT的身份驗證API

熱門問答

如果屬性初始化為公共屬性，但setters和getters將其視為受保護屬性，那么該屬性是否受保護？

如何獲取.NET程序集（類庫）的本機HMODULE？

SQL查詢可以計算包含利息和本金余額的貸款賬戶對賬單嗎？

Ms Exchange Online |傳輸規則中的Regex

將文本的每一行附加為嵌套列表的元素

如何在Spring中創建調用計數器注釋？

當使用`bind`時，如何避免創建過多的函數副本

數字邏輯基礎與verilog設計（加 斯蒂芬布朗）第三版習題答案（觸發器，寄存器和計數器）

Java中的封裝是什么意思

在Azure上部署Apache Kafka的最佳實踐是什么

Flask上傳圖片如何縮放尺寸

點擊【改變2】文字變成 另外一個數據，點擊【改變】在將原來的數據還原，請問如何實現？

數字邏輯基礎與verilog設計（加斯蒂芬布朗）第三版習題答案（觸發器，寄存器和計數器）

點擊【改變2】文字變成另外一個數據，點擊【改變】在將原來的數據還原，請問如何實現？