我在哪里可以将 jwt 令牌存储在 localStorage 中？

Posted 2023-03-10

【中文标题】我在哪里可以将 jwt 令牌存储在 localStorage 中？

【英文标题】：where can I store jwt token in localStorage?

【发布时间】：2020-09-08 03:41:18

【问题描述】：

我想将 jwt 令牌存储在 localStorage 中，然后将其发送回服务器，并以 express 形式发送标头，我在 Visual Studio 和 Chrome 浏览器上工作。 只是为了本地存储，我在网上看到这些说明可以存储令牌，但我不知道我将它放在哪里？ 我可以在哪里将令牌存储在本地存储中，在任何地方？ ，我必须在 Chrom 或 Terminal 中或在哪里编写此说明吗？

 axios.post('http://yourendpoint',data, headers:  
         Authorization:localStorage.getItem('jwtToken')  )
        .then(response=> console.log(response))
        .catch(error => console.log(error));
  ;

简而言之，我想存储令牌，但我不知道在哪里以及如何？。

【参考方案1】：

如果您需要在 chrome 浏览器中手动存储 JWT 令牌，本地存储。您可以按照以下步骤操作。

首先，进入 chrome 开发者工具 (Ctrl+Shift+i) 然后转到Application 标签。 在存储下，您可以找到Local Storage 部分。 然后选择您的站点URL，它将弹出所有当前可用的本地存储对象（请确保选择正确的站点URL）。 然后通过添加“key”和“token”来添加一个新对象

如果需要通过代码将token添加到本地存储，可以通过以下方法添加。

localStorage.setItem('key','your token');

【讨论】：

@NourGeorge，您可以使用本地存储 API 的 getItem 函数并传递您在存储时使用的相同密钥。这个的输出应该是一样的。基本上，您需要在进行 api 调用时从本地存储中检索令牌，并且您需要将此令牌添加到授权标头中作为承载

@NourGeorge 您可以简单地打开 chrome 开发人员工具并转到“控制台”选项卡，然后输入 localStorage.getItem('key'); 它会返回您的令牌。这样您就可以验证您的令牌是否正确存储。 （请务必在移动到您需要存储令牌的相应站点后打开开发者工具。）

【参考方案2】：

假设您有一个类似“/auth”的端点来验证用户身份。在这种情况下，您可以执行以下操作：

 axios.post('http://myapi/auth', data)
     .then(res => localStorage.setItem('jwt', res.data.token))
     .catch(error => console.log(error))

然后，您将可以使用.getItem() 方法访问该令牌：

const token = localStorage.getItem('jwt')

如果您想更好地了解它的工作原理，您应该继续阅读 localStorage API 文档。 更进一步，您还可以了解更多关于the difference between localStorage, sessionStorage and Cookie的信息。