时间戳

首页 > 解决方案 > 将 JWT 访问密钥存储在 Cookie 中，但仍无法访问 API

django - 将 JWT 访问密钥存储在 Cookie 中，但仍无法访问 API

问题描述

在我的 nextjs react 应用程序中，我有这个用于我的登录页面来存储我的 cookie：

axios
  .post(apiUrl, data)
  .then(response => {
    console.log(response.data);
    const token = response.data.access;
    Cookies.set('jwtCookie', token, { expires: 1 });
    Router.push('/');
    setShowLoading(false);
    props.history.push('/show/' + response.data._id);
  })
  .catch(error => setShowLoading(false));

我已成功从后端接收访问密钥，并且我的 cookie 可以在 Chrome 上的开发工具的应用程序部分中看到。

但是，从这一点来看，我对如何才能访问需要身份验证的页面感到有些困惑。我有一个页面，我正在使用 axios 发出获取请求：

const user = await axios
  .get(`http://localhost:8000/api/users/${username}/complete/`, { withCredentials: true })
  .then(function(response) {
    return response.data;
  });

如何告诉我的后端我的访问密钥存储在一个名为 jwtCookie 的 cookie 中，以便它可以让我执行获取请求？我正在使用 Django Rest Framework 并将此页面上的权限类设置为 IsAuthenticated。

我知道我的知识在某个地方存在差距，我希望有人可以帮助我弥合这个差距。谢谢！

标签： djangoreactjsdjango-rest-frameworknext.js

解决方案

有几种方法可以使用您的 API 进行身份验证，并且 DRF 支持很多。您正在使用令牌身份验证，在这种情况下，您需要在AuthorizationHTTP 标头中提供令牌。

您可以像这样指定全局 axios 默认值，

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

您可以在创建这样的实例时设置它，

const instance = axios.create({
  baseURL: 'http://localhost:8000/api',
  headers: {'Authorization': AUTH_TOKEN}
});

或者之后， instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

DRF认证文件

axios 文档

推荐阅读