DRF - Не были предоставлены учетные данные для аутентификации. (Djoser + SimpleJWT)

В настоящее время я получаю ошибку при выполнении запроса к /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: '/' });
}

Может ли кто-нибудь помочь мне понять, что я, возможно, делаю (делаю) неправильно? Я не могу самостоятельно разобраться в этом с помощью документации после долгого чтения.

На случай, если вам понадобится доступ к другим файлам (front и back end), вот Github repo.

Следуйте руководству по использованию здесь 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, в которой используются маркеры безопасности, называемые маркерами на предъявителя. Название "аутентификация на предъявителя" можно понять как "предоставить доступ предъявителю этого маркера". Токен на предъявителя - это шифрованная строка, обычно генерируемая сервером в ответ на запрос на вход в систему. Клиент должен отправить этот токен в заголовке Authorization при запросах к защищенным ресурсам:

Авторизация: Bearer 'token'

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);
})
Вернуться на верх