需要将访问令牌存储从后端(JSON)发送到LocalStorage并使用该令牌登录.如何

Question

我正在尝试实现登录(纯JavaScript(。我从后端得到一个令牌。我需要使用该令牌并将其存储在LocalStorage中。请帮助我。

我已经正确完成了API调用。但是我遇到了502(糟糕的网关(错误。我认为原因是我没有设置令牌。

function postData() {
    var res = fetch('https://example.api.com/login', {
        method: "POST", // POST
        mode: "cors",
        cache: "no-cache",
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json'    
        },
        redirect: "follow",
        referrer: "no-referrer",

        body: JSON.stringify({
            isArray: false,
            data: {
                    email: document.getElementById("email").value,
                    password: document.getElementById("passwordNew").value
                }
        })
    }).then(response => response.json()); // parses response to JSON
    console.log("result :" + res);
    return res;
}

这是我做的API调用，作为响应，我得到了令牌。

响应如下所述。

"data": {
    "token": "sdfsdgsfgsgsgssb497e7764f4df8cb504a122cc18b2eed8",
    "startTime": 1558417495078,
    "endTime": 1558503895078
}

我希望在输入电子邮件和密码后成功登录 - 使用后端发送的令牌发送。

Answer 1

因此，从登录请求中收到令牌后，您就需要存储令牌。看起来您在正确的轨道上，考虑了LocalStorage。另外，我建议您继续使用异步/等待语法，以易于阅读/使用。它要求您利用承诺，但更可读性。而不是解决/拒绝功能，而是将代码包装在尝试/捕获块中。因此，要在登录后将令牌存储在LocalStorage中，请执行类似的操作：

async function handleLogin(un, pw) {
  try {
    let response = await fetch('https://example.api.com/login', {
        method: "POST", // POST
        mode: "cors",
        cache: "no-cache",
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json'    
        },
        redirect: "follow",
        referrer: "no-referrer",
        body: JSON.stringify({
            isArray: false,
            data: {
                    email: document.getElementById("email").value,
                    password: document.getElementById("passwordNew").value
                }
        })
    })
    response = response.json();
    window.localStorage.setItem('token', response.data.token)
  } catch(e) {
    console.log('error while logging in', e)
  }
}

然后，当您想在以后的请求中使用令牌时，您可以从LocalStorage中获取它。例如：

async function editProfile(updatedProfileInfo) {
  const token = localStorage.getItem('token');
  try{
    let response = await fetch('https://someurl.com/edit', {
      method: "POST",
      ...
      'x-access-token': token,
      ...
    })
  //handle response
  } catch(e) {}
}

需要注意的几件事：

1. 确保您知道您的API期望令牌如何捆绑在请求中。在上面的示例中，我将其粘在请求标头的x-access-token部分中。但是，许多人使用cookie等。请确保您将其传递到预期的位置。
2. 在提出请求之前，通常要检查令牌是否仍然有效或是否已过期。因此，也可以存储您的整个登录响应，其中包括到期信息和最终时间。然后，您可以在拨打AJAX调用之前进行检查，如果令牌无效，则只需将用户登录。执行此操作时，请务必从LocalStorage中删除令牌。