angular - 无法取消订阅应用程序组件中的可观察对象

Question

我创建了一个身份验证服务，在其中检查本地存储中是否存在访问 token 。为此，我创建了一个调用 hasValidAccessToken 函数的可观察对象。该函数发出 bool 值。

我在 app-component 中订阅了该可观察对象。问题是我无法取消订阅 app-component 中的订阅，因为它永远不会被销毁。

authentication.service.ts

 public isAuthenticatedSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(this.hasValidAccessToken());
    public isAuthenticated$: Observable<boolean>;

 isTokenExpired(): boolean {
        const expiresAt = localStorage.getItem("expires_at");
        const now = new Date();
        if (
            expiresAt &&
            parseInt(expiresAt, 10) < Math.floor(now.getTime() / 1000)
        ) {
            return false;
        }
        return true;
    }

    hasValidAccessToken(): boolean {
        if (this.hasAccessToken()) {
            return this.isTokenExpired();
        }
        return false;
    }

    hasAccessToken(): boolean {
        return !!localStorage.getItem("access_token");
    }

    decodeToken(token: string) {
        if (token) {
            return jwt_decode(token);
        }
    }

app.component.ts

this.isAuthenticatedSubscription = this.oauthService.isAuthenticated$.subscribe(
                data => {
                    if (data) {
                        this.router.navigate(["home"]);
                    } else {
                        this.router.navigate(["login"], {
                            state: { data: "session has been expired" }
                        });
                    }
                }
            );

Answer 1

您永远不应该取消订阅该可观察的内容。您基本上是在重新创建 Authentication Guard 。想象一下，如果您确实取消订阅，并且在应用程序中的某一时刻您丢失了身份验证 token (注销，或者过期......)。由于您已取消订阅，您仍然可以浏览该应用程序，因为此代码永远不会触发:

 else {
         this.router.navigate(["login"], {
             state: { data: "session has been expired" }
         });
      }

我的建议是通过创建我之前提到的身份验证防护来替换逻辑。这样您就可以使用 canActivate 来保护您的路线。 ，这也是最佳实践。