Aurelia

Question

我有一个获取并获取 JWT 令牌，然后将其保存到本地存储。这行得通。

然后我将“.then”链接到初始提取，并通过一个称为另一个提取的函数去从 API 获取用户名和密码，然后将其保存到本地存储。

最后的“.then”将根重置为新的根。（有效）...并且 JWT 和 loggedIn 的第一个 localStorage 保存也在 setRoot 调用开始之前完成，但是....

我的问题是，我发现在新根页面具有运行其构造函数并尝试从 localStorage 获取用户名之后，第二次 Fetch 将用户名保存到 localStorage。由于第二次获取尚未完成，localStorage 中的 'username' 尚未设置...

如何确保在重置 root 之前我的所有提取和所有保存到 localStorage 的内容都已成功保存？

这是我的 login.ts 文件，我在其中进行初始提取。

login(username: string, password: string) {
    this.userLogin.Username = username;
    this.userLogin.Password = password;

    // Lets do a fetch!
    const task = fetch("/api/jwt", {
        method: "POST",
        body: JSON.stringify(this.userLogin),
        headers: new Headers({ 'content-type': 'application/json' })
    })
        .then(response => response.json())
        .then(data => {
            console.log("data - in FETCH: ", data);
            localStorage.setItem(this.TOKEN_KEY, JSON.stringify(data));
            localStorage.setItem(this.LOGGED_IN, JSON.stringify("authenticated"));

        })
        .then(() => {
            this.saveUserDetail();
        })
        .then(() => {
            console.log(" before redirect USERNAME_KEY): ", localStorage.getItem(this.USERNAME_KEY));
            this.router.navigate('/', { replace: true, trigger: false });
            this.router.reset();
            this.aurelia.setRoot('app/app/app');
        })
        .catch(error => {
            this.clearIdentity();
        });

你可以看到我在第三个“.then”中调用了 this.saveUserDetail()，在第四个“.then”中我调用了 aurelia.setRoot('...').

这是我的 this.saveUserDetail() 函数和第二次提取。

saveUserDetail() {
    const session = this.getIdentity();
    if (!session) {
        throw new Error("No JWT present");
    }
    const token = session.access_token;

    const headers = new Headers({
        Authorization: `bearer ${token}`,
        "Content-Type": "application/json; charset=utf-8"
    });

    const task = fetch("/api/jwt/userDetail", {
        method: "GET",
        headers
    })
        .then(response => response.json())
        .then(data => {
            try {
                console.log("data.stringify: ", JSON.stringify(data));
                localStorage.setItem(this.USERNAME_KEY, data.username);
                localStorage.setItem(this.USERROLES_KEY, data.role);
            } catch (Error) { }

            console.log("localStorage.getItem(this.USERNAME_KEY): ", localStorage.getItem(this.USERNAME_KEY));
        });
}

我觉得我应该返回 API 以获取用户名。也许我可以一次性完成等等，有没有办法在我执行“aurelia.setroot()?

之前让 localStorage 加载所有内容

Answer 1

尝试添加 return 以便等待由 this.saveUserDetail() 编辑的承诺 return - 哦，等等，你需要 return saveUserDetail 中的承诺] 也

所以

.then(() => {
    return this.saveUserDetail();
})

或

.then(this.saveUserDetail) // note, pass the function, don't call it

并更改 saveUserDetail

saveUserDetail() {
    // all your code, then at the bottom of the function add:
    return task;
}

Aurelia - 两个 "Fetches" 的问题，其中第二个在呈现新页面后完成并加载 localStorage

Aurelia - Issues with two "Fetches" where the second finishes and loads localStorage after new page is rendered

javascript

fetch