Question

根据Angular文档，CanActivate接口公开了a function，该布尔函数返回一个布尔值。官方示例显示该函数就像谓词，没有副作用。

我们要防止用户直接从URL访问页面。根据{{3}}和许多在线示例（包括StackOverflow答案），可以从canActivate()函数中向Angular路由器添加调用。

但是我不知道这是否被认为是好的做法，因为它似乎是副作用。

@Injectable()
export class AdminGuard implements CanActivate {

  constructor(private keycloakService : KeycloakService,
              private router: Router) {

  }

  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.keycloakService.isAdmin()) {
      return true;
    }
    this.router.navigate(['/']); // HERE
    return false;
  }
}

如果用户直接通过URL访问受保护页面，建议将其重定向到远离受保护页面的方法是什么？

Answer 1

一个非常动态的解决方案是在路由上使用data属性。

因此，在您的 route-module 中设置以下内容：

 ...

const appRoutes: Routes = [
    {
      path: 'restricted',
      component: RestrictedComponent,
      canActivate: [AuthGuard],
      data: {
        authGuardRedirect: '/custom-redirect'
      }
    }
  ];

通过这种方式，我们现在可以在AuthGuard中设置默认重定向值，但是我们始终可以灵活地用data属性覆盖该值。我们的 AuthGuard 将如下所示：

...

  canActivate(routeSnapshot: ActivatedRouteSnapshot): Observable<boolean> {
    let customRedirect = routeSnapshot.data['authGuardRedirect'];
    let isUserLoggedIn = this.authService.isUserLoggedIn;

    if (!isUserLoggedIn) {
      let redirect = !!customRedirect ? customRedirect : '/unrestricted';
      this.router.navigate([redirect]); 
    }

    return isUserLoggedIn;
  }

Source @Kirja.com

Angular Guard：未授权用户时该重定向到哪里？

1 个答案: