是否可以在 Angular 中保护方法？答案

【问题标题】：Is it possible to guard a method in Angular?是否可以在 Angular 中保护方法？
【发布时间】：2020-03-23 13:57:13
【问题描述】：

我想知道是否可以在 Angular 应用程序中保护方法而不是路由。假设您有一个按钮，如果您单击它但未登录，您将被重定向到登录页面。

谢谢

【问题讨论】：

【解决方案1】：

方法没有这样的守卫。相反，最可能的解决方案是在您想要保护的方法中创建条件检查。

例如，如果需要保护的方法是 checkoutCart() 并且您的 Angular 应用程序中有一个服务会通知您用户是否登录。那么这就是您可以在 checkoutCart() 方法中执行的操作：

checkoutCart() {
   if ( !this._authenticationService.isLoggedIn ) {
      this.router.navigate(['/', 'login']).then(nav => {
         console.log(nav); // true if navigation is successful
      }, err => {
         console.log(err) // when there's an error
       });

      return;
   }

   // REST OF YOUR PROTECTED CODE
}

要了解路由器的工作原理，您可以参考：https://alligator.io/angular/navigation-routerlink-navigate-navigatebyurl/

【讨论】：

谢谢，我就是这么想的。我基本上是在尝试与谷歌对谷歌图书做同样的事情。当您想将一本书添加到您的书架并且未连接时，您将被重定向到登录页面。即使您没有连接，该按钮也在这里。

【解决方案2】：

这是一个工作示例。主要逻辑在 auth 守卫中，如果它没有登录，我们会重定向到登录页面。

canActivate(next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {
    let url: string = state.url;
    return this.loggedInService.isLoggedIn$.pipe(map(data => {
      if(!data) {
        this.router.navigate(['login']);
      }
      return data;
    }));
  }

Stackblitz example

【讨论】：