问题描述
我使用的登录 API 接受用户名和密码并返回令牌。我正在检索 session_token 并将其设置为用户的 cookie,每当其他用户登录时,我都会这样做:
async function login(username,password) {
var myHeaders = new Headers();
var requestOptions = {
mode: 'cors',method: 'POST',headers: myHeaders,redirect: 'follow'
};
fetch("http://someAPIthatreturnsatoken",requestOptions)
.then(response => response.text())
.then(result => {
let token = JSON.parse(result);
let session_token = token.Token;
Cookies.set("session_token",session_token)})
.catch(error => console.log('error',error));
}
对于我制作的登录表单,这个异步函数被称为 onSubmit。如果成功,它会将用户发送到“/帐户”页面。 在此帐户页面中,我需要检索 session_token 并使用 POST 将其再次发送到服务器,该 POST 将检索我的用户信息。所以,我得到了 onSubmit 的令牌,它将用户发送到他的帐户,然后我:
- 从 cookie 中检索令牌
- 像这样发送到服务器:
let session_token =Cookies.get("session_token");
const getAccountInfo = () => {
var myHeaders = new Headers();
myHeaders.append("Cookie","session_token="+session_token);
var requestOptions = {
mode: "cors",method: 'GET',redirect: 'follow'
};
fetch("http://someAPIthatusestokentoretrieveinformation",requestOptions)
.then(response => response.json())
.then(result => {
let accountInfo = JSON.parse(result);
let fullName = accountInfo.session_data.FirsTNAME +'\t'+ accountInfo.session_data.LASTNAME;
let email = accountInfo.session_data.EMAIL;
let phone = accountInfo.session_data.PHONE;
document.getElementById("account-holder").innerHTML = fullName;
document.getElementById("account-email").innerHTML = email;
document.getElementById("account-phone").innerHTML = phone;
})
.catch(error => console.log('error',error));
}
一切正常。我发送用户名和密码并获得会话令牌。然后我将它设置为 cookie,然后在 Account() 组件加载时将它发送到另一个 API 以检索用户信息。 但是唯一的问题是,由于这两个函数都是异步的,所以cookie更新需要一定的时间,也就是说如果有不同的session_token,页面会先加载之前的客户信息,然后我刷新的时候,它加载了正确的信息。
如何设置 cookie 以允许我检索 session_token 并在帐户页面上加载信息,而无需刷新它才能显示?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)