如何处理异步本地存储与角2？

Question

我正在使用angular async本地存储模块设置本地存储中令牌的到期时间。

import { AsyncLocalStorage } from 'angular-async-local-storage';

const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());

this.localStorage.setItem('expires_at', expiresAt).subscribe(() => {});

然后，我有一个在用户登录时调用的函数，该函数检查令牌是否仍然有效：

get isAuthenticated(): boolean {
    let res;
    this.localStorage.getItem('expires_at')
        .subscribe((val) => {
            let expiresAt = JSON.parse(val);
            res = (expiresAt && this.loggedIn) ? (new Date().getTime() < expiresAt) : false;
        });

    return res;
}

这里的问题是localStorage.getItem（）返回一个可观察的。所以当我们在可观察的上调用。订阅时，它被异步调用，这意味着我们不会阻塞，直到结果准备好，所以代码直接通过并执行返回res语句，此时res是未定义的，因为订阅箭头函数中的代码尚未执行，因为结果尚未准备好。

所以我需要一些关于解决这个问题的最佳方法的建议是什么？我想到的一种方法是尝试并阻塞，直到结果准备就绪，但鉴于我们使用的是html" target="_blank">异步本地存储模块，这似乎是一种反模式。但也许我需要的只是一个简单的同步本地存储模块？或者这被认为是不好的做法？任何帮助都很好，谢谢！

Answer 1

我假设您的用户已经期望等待异步登录加载，因此您可以使用flatMap将localStorage调用链接到它：

isAuthenticated(): Observable<number> {
    return this.localStorage.getItem('expires_at')
    .map((val) => {
            let expiresAt = JSON.parse(val);
            return (expiresAt && this.loggedIn) ? (new Date().getTime() < expiresAt) : 0;
        });
}

yourLoginFunction()
.flatMap(loginRes => {
    return this.isAuthenticated()
})
.subscribe(res => {
    // handle accordingly
}

请注意，isAuthenticated（）不能具有类型boolean或可见

Answer 2

长话短说：在您的情况下，我会选择同步本地存储解决方案。

长故事：

在Angular中遇到这样的情况（同步vs异步）时，我总是会得到以下两种解决方案之一：

1）让isAuthentiated返回可观察的，并将您的本地存储映射为可观察的返回true/false

get isAuthenticated(): Observable<boolean> {
    return this.localStorage.getItem('expires_at').pipe(
        map((val) => {
            let expiresAt = JSON.parse(val);
            let res = (expiresAt && this.loggedIn) ? (new Date().getTime() < expiresAt) : false;
            return res;
        })
    );
}

2） 按照您的建议使用同步解决方案

什么是最佳做法取决于情况。根据我的经验，如果你以可观察的方式去做，你最终会得到更多的代码处理

另一方面，如果您使用同步解决方案，您的代码会简单得多，但在某些情况下，您的应用程序可能会变得非常慢（想象一下在缓慢的移动网络上同步HTTP请求）。

因此，如果你只从本地存储中获得一个小项目，你不会看到差异。另一方面，这个库为IndexedDb提供了相同的接口，其中最大限制可能是2Gb的数据，因此您可以将整个集合保存在那里，如果您使用异步方式，那么您的应用程序速度可能会很大。