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);
})