如何将jwt令牌存储在localStorage中并将其发送回带有标头的服务器？

Question

我在stackoverflow上读了很多文章，看过很多youtube视频，但没有找到示例代码来演示将jwt保存到localstorage的流程-使用授权标头发送回服务器进行验证。

这是我想做的。

当客户端登录到服务器时，服务器提供令牌并将其保存到客户端本地存储（或会话存储）。

每当客户端调用只能使用令牌访问的api时，客户端从本地存储中检索令牌，并将该令牌与授权标头（请求标头。[x-access-token]或请求标头。[authorization]）一起发送到服务器。

但是我读过的所有文章都是用Postman解释这个问题，它没有显示如何将其存储到本地存储，并将其放在授权标头中。

我必须使用本地存储吗。当服务器将令牌提供给客户端时，使用和本地存储。在将该令牌发送回服务器之前，使用append（）或axios（）获取项目和新标题？

示例不一定是针对快速用户的，但我想了解一下想法。

Answer 1

很简单跟着我

首先，您必须将Token（或访问令牌）保存到本地存储中，在发送登录请求时在登录组件中执行以下操作：

signin:function() {
        axios.post('http://Somthing/log-in/',{
            username: this.username,
            password: this.password,
        })
        .then( (response) => {
            
            let token = response.data.access;
            localStorage.setItem("SavedToken", 'Bearer ' + token);
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
            (this.$router.push({name:'HomePage'}));
            
            })

所以现在的问题是，每当你刷新主页时，你都会得到401错误，解决方案是：只需添加以下内容：{Headers：{Authoration： localStorage.getItem（'SavedToken') }}到每个需要Token的请求的末尾，如下所示：

 axios.get('http://Something/', { headers: { Authorization:localStorage.getItem('SavedToken') }})
        .then(response =>{
            //something
        })

请注意，我在这个解释中使用的令牌是SIMPLEJWT，如果您使用其他东西，也许您必须将“承载者”更改为其他东西。

Answer 2

首先，您必须通过Jwt（jsonWebTokens）创建或生成令牌，然后将其存储在本地存储中或通过Cookie或通过会话。我通常更喜欢本地存储，因为通过SET将令牌存储在本地存储中并使用GET方法检索它更容易。通过get检索后，您可以通过jwt验证它，并使用承载身份验证对其进行身份验证。

对于标题，添加授权

fetch("/users", {
  method: "Get",
  headers: {
    "content-type": "application/json",
    Authorization: "Bearer" + localStorage.getItem("token")
  }

Answer 3

您可以将jwt令牌存储在localstorage中，当您进行API调用时，可以将令牌作为令牌添加到头中。如果您使用的是axios，您可以像这样将令牌附加到标头。这里，令牌存储在本地存储中，密钥为“jwtToken”

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