Question

我想知道是否有相当于角度组件功能的路线防护（特别是点击事件）。

我们设置了一个路线保护设置，可以在未登录时打开登录页面。这非常有用。问题是，我们有一个不需要身份验证才能查看的组件，但组件中的某些功能确实需要身份验证。例如，新闻文章列表，但upvote / downvote按钮需要使用身份验证。

upvote / downvote按钮只是点击触发组件功能的事件。我们可以在我们的自定义路由保护中采用我们正在使用的逻辑，并将其添加到这些函数中，但这会导致相当多的重复代码。

我想知道Angular是否有任何内置可以解决这个问题。我正在考虑类似于ASP.NET MVC的[Authorize]属性，您可以将其置于操作的顶部进行身份验证。据我所知，路线防护仅适用于路线，而不是单击事件。

Answer 1

对于任何对解决方案感兴趣的人，我能够弄清楚如何在一个函数中使用我现有的路径保护。这消除了对if / else语句的需要，其中else语句包括路由守卫在未经身份验证时正在执行的逻辑。似乎是我能找到的最干净的解决方案。

＆＃13;

Double max = Collections.max(map.values());
for (String s : map.keySet()){
            if (map.get(s)==max){
                System.out.println(s);
            }
        }

＆＃13;

Answer 2

如果您的用户已登录，您的路线保护测试如何？希望您已经设置了授权服务，检查并将其注入您的警卫。如果是这样，请将其注入您的投票组件，然后根据用户是否登录使用* ngIf隐藏/显示投票按钮。

Answer 3

我找到了另一种实现动作守卫的方法。它是拦截器。当操作向服务器发送请求而没有有效令牌或没有必要数据时，服务器将返回401或403，具体取决于您的设置

@Injectable()
export class HttpAuthInterceptor {
  constructor(
    private toasterService: ToasterService,
    private auth: AuthService,
    private dialog: MatDialog) { }

  public intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        'Authorization': `Bearer ${this.auth.token}`
      }
    });

    return next.handle(request)
      .pipe(catchError(error => {
        if (error instanceof HttpErrorResponse) {
          switch (error.status) {
            case 401:
              this.auth.logout(request.urlWithParams);
              this.dialog.closeAll();
              break;
            case 403:
              this.dialog.closeAll();

              this.dialog.open(ConfirmDialogComponent, {
              
                autoFocus: false,
                width: '65rem',
                maxHeight: '95vh',
                maxWidth: '80vw',
                panelClass: 'confirme__dialog',
                data: {
                  title: 'CONFIRM_DIALOG.TITLE',
                  text: 'CONFIRM_DIALOG.TEXT',
                  onConfirm: () => {
                    this.auth.logout(request.urlWithParams)
                  }
                }
              });

              break;
            case 0:
              this.toasterService.error(error.message, {
                duration: 5000,
              });
              break;
            default:
              this.toasterService.error(error.error.Message, {
                duration: 5000,
              });
          }
        }

        return throwError(error);
      }));

  }
}

相当于组件功能的路径保护

3 个答案: