svelkit中使用JWT的身份驗證API

我無法使用 svelte 對我的 API 端點進行身份驗證。出于安全原因，我正在嘗試使用 HTTPonly cookie 對我的端點進行 JWT 身份驗證，但是它不起作用。錯誤：“未提供身份驗證憑據。” 我看不到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>

uj5u.com熱心網友回復：

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

您的 API 會在成功登錄后回傳 JWT 訪問令牌，但不會設定任何包含該令牌的 cookie。事實上，您的 API 根本不依賴于 cookie ，因為受保護的路由不期望包含 JWT 令牌的 cookie，而是包含令牌的 Authorization 標頭。

這就是為什么我如此堅持要您提供后端的詳細實作。

在您遵循并在評論中鏈接的教程中，作者明確宣告了他使用 cookie 進行身份驗證的意圖。這種選擇反映在前端（通過使用 中的credentials: include選項fetch），但也反映在后端，例如，在他的 API 的 Laravel 實作中（第 35 行），或者在它的 Node 實作中（第 40-43 行）。在這兩種情況下，您都可以看到后端如何顯式設定和回傳“jwt”cookie。

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

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

所以你在這里有兩個選擇。更簡單的選擇是調整客戶端代碼以使用 API 提供的身份驗證機制。這意味著將您的令牌存盤在例如 sessionStorage 中，并在向受保護的端點發出請求時正確設定 Authorization 標頭：

// 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 的其他現有服務（如果有）。

標籤：

上一篇：docker-composepush使用AzureRegistry失敗，出現“錯誤：未經授權：需要身份驗證”

下一篇：如何將來自掃描二維碼的字串決議為不同類中的變數