Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular Auth - Coggle Diagram

- - - - intercept(req: HttpRequest<any>, next: HttpHandler){...}
        
        return this.authService.user.pipe( take(1), exaustMap(user => { ... return next.handle(modifiedReq)}) )
        
        this.authService.user is a BehaviorSubject which emits user state(user object or null). Use take(1) pipe to take the last user and terminate the observable, then switch to another observable, which is next.handle(). We extract data like token and put it into request header, then put it into next.handle()
        
        let modifiedReq = req.clone({ params: new HttpParams().set('auth', user.token) })
        
        next.handle(): Observable
        
        Notice: ALL http request will add token including login and register. Add additional logic to exclude that.
    - - notice: empty inside, will be provide in a specific way
  - - - HTTP_INTERCEPTOR: a flag to ng this is an interceptor. multi: always set to true
- - - - cancel timer when logout
  - - - log user out if stored date expired
- - - - @Injectable({ providedIn: 'root' })
    - - use navigate()
        
        return this.authService.user.pipe(map( user => { return !!user; } ))
        
        pipe(map(...), tap(isAuth => { if(!isAuth){this.router.navigate(...) } })
        
        use router.navigate() might lead to some errors in some edge cases.
      - use UrlTree
        
        return this.authService.user.pipe( take(1), map( user => { const isAuth = !!user; if(isAuth){ return true; } return this.router.createUrlTree(['/auth']) }))
- - - - params
        
        this.http.get(API_URL, { params: new HttpParams().set(...)})
- - - - receive err in subscribe. do ui display in component