是否可以保护 Angular 中的方法？

Question

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

谢谢

Answer 1

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

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

Answer 2

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

例如，如果需要保护的方法是 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/

是否可以保护 Angular 中的方法？

Is it possible to guard a method in Angular?

angular

angular-router-guards