带有 jwt cookie 的 angular 应用程序中的身份验证点

Question

我无法找到解决我的具体问题的现有问题。我正在开发一个 angular 应用程序，它使用 jwt 和仅限 http 的 cookie 进行身份验证 。像往常一样，为了在后端验证请求，每次请求都会发送 jwt cookie。一切正常，但我想知道 验证用户是否已通过身份验证的最佳方法是什么 - 特别是 WHERE.

从各种教程中我知道您通常使用 AuthGuards 和自定义 AuthService 来验证身份验证和保护路由。在我的例子中，我可以通过提供端点 /api/users/currentuser 来验证身份验证，其唯一目的是检查 jwt 令牌并 如果用户已通过身份验证，则用用户对象回答。这也可以正常工作，但是 angular 应用程序中触发该请求的最佳位置在哪里？

它在我的 AuthService 的 constructor 中，以确保它是第一个被调用的东西，然后设置一个 BehaviorSubject<boolean> 所有其他组件可以在哪里订阅？

 export class AuthService {
 isLoggedIn$ = new BehaviorSubject < boolean > (this.isLoggedIn);
 ...
 constructor() {
   // make call to /api/users/currentuser backend 
   // set isLoggedin$ to true/false according to result of currentuser response
   this.isLoggedIn$.next(value);
 }

保护一个或多个路由的 AuthGuard 是否应该向 canActivate 内部的后端发出自己的请求？

 canActivate(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ):
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>
     | boolean
     | UrlTree {
     if (!this.authService.getCurrentUser()) {
       console.log('NOT autheticated');
       this.router.navigate(['']);
       return false;
     }

     console.log('AUTHENTICATED');
     return true;
   }

或者 AuthGuard 订阅到 AuthService BehaviorSubject 就像所以：

 canActivate(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ):
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>
     | boolean
     | UrlTree {
     if (!this.authService.isLoggedIn$.getValue()) {
       console.log('auth guard NOT autheticated');
       this.router.navigate(['']);
       return false;
     }

     console.log('AUTHENTICATED');
     return true;
   }

并且是否应该在页面加载开始时使用 async ... await ... 调用 /api/users/currentuser 以确保在此期间呈现页面之前验证身份验证？
尤其是在页面刷新之后 - 理想情况下身份验证应该在哪里发生？

应用程序中是否有一个完美的 place/point 应该调用 ?/api/users/currentuser？所有需要知道身份验证信息的组件都可以共享结果，或者出于（安全？）原因来自不同地方（authservice、authguard、不同组件等）的多次调用？

当前 app.component.html:

<app-navbar></app-navbar>
<router-outlet></router-outlet>

Answer 1

您（可能还有大多数人）理想情况下希望在应用程序中的任何其他操作之前进行身份验证。这意味着最好的做法是作为某些“预加载”服务的一部分。

创建如下服务：

@Injectable({
    providedIn: 'root',
})
export class PreloadService
    constructor(
        private authService: AuthService
        // add whatever other imports needed
    ) {}

    public async initializeApp() {
        if (!this.authService.isLoggedIn()) {
            await this.authService.login() // or whatever you need to do
        }     
    }
}

export function PreloadFactory(preloadService: PreloadService) {
    return () => preloadService.initializeApp();
}

然后在app.module:

    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: PreloadFactory,
            deps: [PreloadService],
            multi: true,
        },
    ]

现在您的预加载服务将运行并且可以确保在应用程序初始化时和加载任何路由之前对用户进行身份验证。

带有 jwt cookie 的 angular 应用程序中的身份验证点

Point of authentication in an angular application with jwt cookie

authentication

jwt

typescript

angular