如何使用 Axios 在 cookie 中存储 JWT？_JavaScript

我在 React 应用程序和 Axios 中使用 JWT 来处理 API 调用。 我正在寻找一种将令牌存储在 cookie 中的方法，以便每次刷新浏览器时都不会重定向到再次登录。

这是我对 Axios 的设置和我的登录调用：

let authToken = null; 

const axios = axiosAPI.create({
    baseURL: baseURL
});

// User login
export const loginUser = (data) => {
    return new Promise((resolve, reject) => {
        axios.post(`${baseURL}/jwt-auth/v1/token`, data)
            .then((res) => {
                authToken = res.data.token;

                // Adds the token to the header
                axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;

                resolve(res.data);
            })
            .catch((error) => {
                reject(error);
            });
    });
};

我不确定应该在哪里设置 cookie 以及如何设置？

编辑：

我已经使用 js-cookie 重写了我的代码，所以它看起来像注释。

import axiosAPI from 'axios';
import Cookies from 'js-cookie';

let authToken = null;

const axios = axiosAPI.create({
    baseURL: `${baseURL}`
});

// Check if user is logged in.
(function () {
    if (Cookies.get('token') === null) {
        // This means that there's no JWT and no user is logged in.
        axios.defaults.headers.common.Authorization = null;
    } else {
        // This means that there's a JWT so someone must be logged in.
        axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;
    }
}());

// User login
export const loginUser = (data) => {
    return new Promise((resolve, reject) => {
        axios.post(`${baseURL}/jwt-auth/v1/token`, data)
            .then((res) => {
                authToken = res.data.token;

                Cookies.setToken('token', authToken);

                // Adds the token to the header
                axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;

                resolve(res.data);
            })
            .catch((error) => {
                reject(error);
            });
    });
};

但是，这完全阻止了我登录，并且出现错误“段数错误”。 知道为什么这不起作用吗？

您可以在此处采用几种不同的选项来解决您遇到的问题，这只是找到存储 JWT 的地方，以便您即使在刷新页面后也可以使用它。

将 JWT 保存在axios.post回调中的localStorage或sessionStorage中，以便您即使在页面刷新后也可以访问它。 要了解哪种存储最适合您的应用程序，请参阅。
简而言之，存储在localStorage 中的值将一直存在，直到您明确删除它们（您可以通过 JS 代码执行此操作）。 此外，您在浏览器中打开的任何选项卡都可以访问该域（如果您想仍然使用新选项卡登录，这非常有用）。 另一方面，存储在sessionStorage 中的值仅在选项卡关闭之前有效。 它们也不能跨选项卡共享。
使用它很简单：
localStorage.setItem("JWT", authToken); 或sessionStorage.setItem("JWT", authToken); 在您的authToken = res.data.token;之后的回调中authToken = res.data.token;
因此，现在您有了一个存储 JWT 的位置，您需要做的就是确保在您的应用程序在页面加载（或刷新）时初始化时检查存储中是否存在 JWT。 以下是如何使用 localStorage 的基本示例：

// This should be one of the first things that run on your app.

const axios = axiosAPI.create({
    baseURL: baseURL
});

// Check if user is logged in.
(function() { 
  let authToken = localStorage.getItem("JWT");
  if (authToken === null) {
      // This means that there ISN'T JWT and no user is logged in.
      axios.defaults.headers.common.Authorization = null;
  } else {
      // This means that there IS a JWT so someone must be logged in.
      axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;
  }
})();

这将确保用户不会在页面加载时注销（如果之前登录过）。

将 JWT 保存在客户端 cookie 中。 在这里，cookie 被用作存储机制，因为您实际上并没有使用服务器端 cookie，因为您的身份验证都是围绕 JWT 构建的。 您可以遵循与上述相同的代码模式，但将使用document.cookie = "key=value"来设置 cookie，并使用document.cookie来查看所有cookie。
第二种方式不太常见，因为它迫使您进行大量手工劳动，例如解析所有 cookie 并确保设置正确的cookie path属性，以便仅将 cookie 发送到所需的端点（否则您只是造成不必要的开销）。 如果您使用此选项，请阅读以帮助您创建 cookie 以满足您的需求。 您还可以使用像这样的辅助 JS 库来帮助操作客户端 cookie。

此外，我会通读以进一步深入研究这两个选项并了解与每个选项相关的优缺点。

如何使用 Axios 在 cookie 中存储 JWT？

问题描述

1楼