DRF认证错误：未提供凭证（Djoser + SimpleJWT）及Token存储问题

核心问题 #

1. 登录时未存储JWT Token：调用/api/auth/jwt/create/接口后，未提取返回的Token并存储到Cookie中，导致后续请求无法获取有效凭证。
2. 请求/users/me时Token格式错误：读取Cookie时不必要地使用JSON.stringify()，导致Authorization头中的Token格式不符合接口要求。

代码修复 #

1. 修复登录页面（login.vue） #

修改submit函数，提取接口返回的Token并存储到Cookie：

const router = useRouter();
async function submit() {
    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
        })
    });
    // 提取接口返回的Token数据
    const tokenData = await response.json();
    // 将access token存入Cookie
    const jwtCookie = useCookie('jwt');
    jwtCookie.value = tokenData.access;
    await router.push({ path: '/' });
}

2. 修复首页请求（index.vue） #

移除不必要的JSON.stringify()，直接使用Cookie中的Token值：

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

额外注意事项 #

• 确保后端CORS配置允许携带凭证（credentials: true），且允许的Origin与前端域名匹配；
• 若后端返回的Token包含refresh字段，可按需存储用于后续刷新Token；
• 建议添加错误处理逻辑，比如登录失败时提示用户、Token过期时触发刷新流程。

内容的提问来源于stack exchange，提问作者Sebastian Rubina