需要将从后端 (json) 发送的访问令牌存储到本地存储中并使用该令牌登录。如何？

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。此外，我建议继续使用 async/await 语法，因为它更易于阅读/使用。它要求您利用承诺，但它更具可读性。而不是解决/拒绝功能，您只需将代码包装在 try/catch 块中。因此，要在登录后将您的令牌存储在 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) {}
}

需要注意的几点：

确保您知道 API 希望令牌如何捆绑在请求中。在上面的示例中，我将其粘贴在请求 header 的 x-access-token 部分。但是，许多人使用 cookie 等。请确保将其传递到预期的位置。
在发出请求之前，通常习惯检查令牌是否仍然有效或是否已过期。因此，存储您的整个登录响应（包括过期信息和结束时间）也许是有意义的。然后您可以在进行 ajax 调用之前进行检查，如果令牌无效，只需将用户注销。执行此操作时，请务必也从 localStorage 中删除令牌。

需要将从后端 (json) 发送的访问令牌存储到本地存储中并使用该令牌登录。如何？

Need to Store a Access token send from backend (json) into localstorage and login using that token. How?

javascript

json

authentication

login

token