DRF - 未提供身份驗證憑據。 (喬塞爾 + SimpleJWT)

Question

我目前在向/users/me發出請求以接收我的用戶數據時遇到錯誤。 從我一直在閱讀的內容來看，我沒有發送令牌，盡管我不確定在登錄時從jwt/create端點收到它時如何存儲它。

這是來自我的Auth-Test/nuxt-auth/pages/index.vue文件：

onMounted(async () => {
    const cookie = useCookie('jwt');
    console.log('COOKIE: ' + JSON.stringify(cookie));
    const response = await fetch('http://localhost:8000/api/auth/users/me/', {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `JWT ${JSON.stringify(cookie)}`,
        },
        credentials: 'include'
    })
    const content = await response.json();
    console.log(content);
})

這是來自我的Auth-Test/nuxt-auth/pages/login.vue

const router = useRouter();
async function submit() {
    console.log(JSON.stringify({
        email: user.email,
        password: user.password
    }))
    await fetch('http://localhost:8000/api/auth/jwt/create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({
            email: user.email,
            password: user.password
        })
    });
    await router.push({ path: '/' });
}

誰能幫助我意識到我可能做錯了什么？ 經過大量閱讀后，我似乎無法通過使用文檔自己弄明白。

如果您可能需要訪問其他文件（前端和后端），這里是Github 存儲庫。

Answer 1

按照這里的使用指南https://django-rest-framework-simplejwt.readthedocs.io/en/latest/getting_started.html#usage

您應該存儲 JWT 令牌而不是使用 cookie。

const router = useRouter();
async function submit() {
    console.log(JSON.stringify({
        email: user.email,
        password: user.password
    }))
    const response = await fetch('http://localhost:8000/api/auth/jwt/create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({
            email: user.email,
            password: user.password
        })
    });
    // it's common to use localStorage to store it so when users go back to your site it's still there.
    // If you don't want that you can just store it in memory.
    const responseJson = await response.json();
    localStorage.setItem('token', responseJson.access);
    await router.push({ path: '/' });
}

然后您可以將其用作Bearer令牌

不記名身份驗證（也稱為令牌身份驗證）是一種 HTTP 身份驗證方案，涉及稱為不記名令牌的安全令牌。 “Bearer authentication”這個名字可以理解為“授予對這個token的bearer的訪問權”。 不記名令牌是一個神秘的字符串，通常由服務器生成以響應登錄請求。 向受保護資源發出請求時，客戶端必須在授權 header 中發送此令牌：

授權：不記名“令牌”

onMounted(async () => {
    const cookie = useCookie('jwt');
    console.log('COOKIE: ' + JSON.stringify(cookie));
    const token = localStorage.getItem('token');
    const response = await fetch('http://localhost:8000/api/auth/users/me/', {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
        },
        credentials: 'include'
    })
    const content = await response.json();
    console.log(content);
})