我正在尝试实现登录(纯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
}
我希望输入电子邮件和密码后成功登录-使用从后端发送的令牌。
答案 0 :(得分:0)
因此,一旦您从登录请求中收到了令牌,就需要存储令牌。您似乎在正确的轨道上,正在考虑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) {}
}
需要注意的几件事:
x-access-token
部分中。但是,许多人使用cookie等。请确保将其传递到预期的位置。