Question

我已经阅读了stackoverflow中的许多文章，并且看过许多youtube视频，但是找不到示例代码来说明将jwt保存到本地存储的流程-发送回带有授权标头的服务器以进行验证< / em>。

这就是我想要做的。

客户端登录服务器时，服务器会提供令牌并将其保存到客户端localStorage（或sessionStorage）。

每当客户端调用只能使用令牌访问的api时，客户端从localStorage取回令牌，并将带有授权标头（req.headers.[x-access-token]或req.headers.[authorization]）的令牌发送到服务器。

但是我读过的所有文章都是在与邮递员一起解释这个问题的，该书没有显示如何将其存储到localStorage并将其放入授权标头中。

当服务器将令牌提供给客户端时，我是否必须使用localStorage.setItem，并且在localStorage.getItem或new Headers()之前将append()和axios与<CheckBox xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/clipboardBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@drawable/clipboard_checkbox" />一起使用将该令牌发送回服务器？

例子不一定非要针对快递用户，但我想了解一下想法。

Answer 1

您可以将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));
   };

Answer 2

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

对于标头，添加授权

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

Answer 3

跟随我很容易

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

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: { Authorization:localStorage.getItem('SavedToken') }} 到每个在标头中需要令牌的请求的末尾，如下所示：

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

请注意，我在此说明中使用的令牌是 SIMPLEJWT ，如果您正在使用其他东西，则可能必须将'Bearer'更改为其他东西。

Answer 4

JWT永远不应存储在您的localStorage中
实际上，它们甚至都不应该存储在您的Cookie中，除非您能够实施非常严格的CSRF保护

Checkout this for motivation

JWT作为id_token就像您的用户凭据
JWT作为access_token就像您的会话令牌

一个选项在内存中。 Checkout this for a deep dive

如何将jwt令牌存储在localStorage中，并使用express中的标头将其发送回服务器？

4 个答案: