我想从浏览器中的 cookie 中获取我的 jwt 值答案

【问题标题】：i want to get my jwt value from cookies in browser我想从浏览器中的 cookie 中获取我的 jwt 值
【发布时间】：2022-02-01 17:07:17
【问题描述】：

当用户登录或注册时，我现在已将我的 jwt 存储在 cookie 中，但数据不会保留，因此我创建了一个函数来处理此问题，但我需要令牌的值才能使其工作

这是我需要令牌值的函数

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common['x-auth-token'] = token;
  } else {
    delete axios.defaults.headers.common['x-auth-token'];
  }
};

这是我在反应中用来将令牌值发送到此函数的操作，我尝试为此使用 js-cookies，但它给了我未定义

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

这是我在浏览器中收到的 cookie

【问题讨论】：

你在哪里设置你的cookie？如果你console.log，cookie 在那里吗？
cookies 在那里，但是当我尝试使用 js-cookie 模块使用 console.log 时，给我 undefined
在帖子中的照片中，您会看到访问令牌，这是我想要获得它的价值的 cookie

标签： node.js reactjs cookies redux js-cookie

【解决方案1】：

如果您仔细查看屏幕截图，您会发现 cookie 是由服务器作为 HttpOnly 发送的。这是一种安全措施，因此任何 JavaScript 代码都无法访问 cookie。

见https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Restrict_access_to_cookies

如果您可以控制服务器，则可以相应地更改它，否则您将不得不进行交易:-)

【讨论】：

我是创建服务器的人，你能告诉我我能做出什么样的改变
您能否提供有关服务器技术堆栈的更多信息？以及如何通过您自己的代码或某个库构建访问令牌 cookie？
我使用 express 和 node ，由 jwt 库创建的令牌
但是仅仅为了解决您的问题而降低安全性可能是错误的方法。 access_token cookie 存储大约一个月。尽管您无法使用 JavaScript 访问它，但浏览器应该为每个请求发送它（有一些限制，如域、路径……但根据您的屏幕截图，它们不是限制性的）。所以服务器已经为每个请求获取了 access_token。您应该能够在浏览器 devtools 的网络选项卡中验证这一点。
好的，我知道您需要 x-auth-token 标头中的访问令牌。该标头发送到哪里，单独的服务器（然后我之前的评论没有帮助）或通过 cookie 传递访问令牌的同一服务器？

【解决方案2】：

 res.cookie('x-auth-token',token,{
      maxAge: 3600,
      httpOnly: true,
      secure:true
    })

【讨论】：

如果你还想要那个“读取cookie”的东西，那么你需要将httpOnly设置为false。
但这将允许任何人使用 javascript 访问此 cookie，这将降低安全级别权利