強制 Angular 應用程序在 session 過期時重定向

Question

我有一個 Angular 應用程序，它需要來自 OIDC 服務的 session 授權。 使用正常/快樂路徑，單獨的 NodeJS/Express 應用程序檢查 session 授權並重定向到 OIDC 授權/身份驗證服務並附加相關標頭。 如果一切順利，中間件將路由到 Angular 應用程序。

但在某個時候，Angular 應用程序使用已過期的令牌運行。 Angular 應用程序獲取用戶名，此時我可以檢查是否過期。 但是，如果它已過期，我需要 Angular 方法通過將整個 Angular 應用程序重新路由到相關的中間件頁面來對錯誤情況做出反應。 因為指示器將 go 指向嵌套在應用程序中的組件，所以我不知道如何讓小組件重定向更大/包含的應用程序。

我不是 Angular 的人，所以我什至不知道要查找 Angular 的哪個部分。 由於我缺乏知識，我包含了可能相關或不相關的源文件。

header.component.ts 是它獲取用戶名並可能返回錯誤令牌指示符的位置

import { Component, OnInit } from '@angular/core';
import { ProfileService } from '../../../core/services/profile.service';

@Component({
  selector: 'header-comp',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  userName: string = 'No Session';

  constructor(private profileService: ProfileService) { }

  ngOnInit() {
    this.onDisplayUserLogged();
  }

  onDisplayUserLogged() {
    this.profileService.getUsername().subscribe(data => {
      this.userName = 'Welcome: ' + data;
    });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_BASE_HREF } from '@angular/common';
import { Router } from '@angular/router';

//Services
import { ProfileService } from './core/services/profile.service';
import { FinanceService } from './core/services/finance.service';
import { CmasService } from './core/services/cmas.service';
import { SoftlayerService } from './core/services/softlayer.service';
import { DashboardService } from './core/services/dashboard.service';
import { LowDollarExceptionService } from './core/services/lowDollarException.service';

//Components
import { AppComponent } from './app.component';
import { CmasComponent } from './modules/cmas/cmas.component';
import { SoftlayerComponent } from './modules/softlayer/softlayer.component';
import { FinanceComponent } from './modules/finance/finance.component';
import { ErrorComponent } from './modules/error/error/error.component';
import { LowDollarExceptionComponent } from './modules/lowDollarException/lowDollarException.component'
import { MenuComponent } from './shared/layout/menu/menu.component';
import { BasicComponent } from './shared/modals/basic/basic.component';
import { HeaderComponent } from './shared/layout/header/header.component';
import { PreProcessedPipe } from './shared/components/file-listing/file-listing.component';
import { ProcessedPipe } from './shared/components/softlayer-file-list/softlayer-file-list.component';

//Routing
import { AppRoutingModule } from './app-routing.module';

//Libs
import { AuthInterceptor } from 'auth-lib';
import { TermsComponent } from './modules/terms/terms.component';
import { FileListingComponent } from './shared/components/file-listing/file-listing.component';
import { ConfirmCancelComponent } from './shared/modals/confirm-cancel/confirm-cancel.component';
import { ErrorDisplayComponent } from './shared/components/error-display/error-display.component';
import { AboutComponent } from './modules/about/about.component';
import { ResultsComponent } from './modules/cmas/results/results.component';
import { SoftlayerFileListComponent } from './shared/components/softlayer-file-list/softlayer-file-list.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { ReviewResultsComponent } from './modules/softlayer/review-results/review-results.component';
import { InvoiceDetailsComponent } from './modules/dashboard/invoice-details/invoice-details.component';
import { FormsModule } from '@angular/forms';
import { LowDollarNewRecordComponent } from './modules/lowDollarException/lowDollarNewRecord.component';

@NgModule({
  declarations: [
    AppComponent,
    CmasComponent,
    FinanceComponent,
    ErrorComponent,
    MenuComponent,
    BasicComponent,
    HeaderComponent,
    TermsComponent,
    FileListingComponent,
    PreProcessedPipe,
    ProcessedPipe,
    ConfirmCancelComponent,
    ErrorDisplayComponent,
    AboutComponent,
    ResultsComponent,
    SoftlayerComponent,
    SoftlayerFileListComponent,
    DashboardComponent,
    ReviewResultsComponent,
    InvoiceDetailsComponent,
    LowDollarExceptionComponent,
    LowDollarNewRecordComponent
  ],
  imports: [BrowserModule, HttpClientModule, AppRoutingModule, FormsModule],
  providers: [
    ProfileService,
    FinanceService,
    CmasService,
    SoftlayerService,
    DashboardService,
    LowDollarExceptionService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      deps: [Router],
      multi: true,
    },
    { provide: APP_BASE_HREF, useValue: '/sprint-cost-recovery' },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import listadeTerms from '../assets/config/properties.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    this.openOverlay();
  }

  openOverlay() {
    var sheet = document.createElement('style');
    sheet.innerHTML =
      '.ds-full-width {visibility: hidden;} .usabilla_live_button_container{visibility: hidden;}';
    document.body.appendChild(sheet);
    if (document.getElementById('termsDialog')) {
      var overlayElement = document.querySelector('#termsDialog');
      overlayElement.classList.add('ds-open');
      document
        .querySelector('#termsDialogCloseBtn')
        .addEventListener('click', load);
    }
    function load() {
      var div = document.getElementById('termsDialog');
      sheet.innerHTML = '.usabilla_live_button_container{visibility: true;}';
      var parent = div.parentElement;
      parent.removeChild(div);
      var node = sheet.parentNode;
      node.removeChild(sheet);
    }
  }
}

應用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// Components
import { CmasComponent } from './modules/cmas/cmas.component';
import { FinanceComponent } from './modules/finance/finance.component';
import { ErrorComponent } from './modules/error/error/error.component';
import { AboutComponent } from './modules/about/about.component';
import { SoftlayerComponent } from './modules/softlayer/softlayer.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { LowDollarExceptionComponent } from './modules/lowDollarException/lowDollarException.component';
import { LowDollarNewRecordComponent } from './modules/lowDollarException/lowDollarNewRecord.component';

const appRoutes: Routes = [
  { path: 'finance', component: FinanceComponent },
  { path: 'cmas-process', component: CmasComponent },
  { path: 'about', component: AboutComponent },
  { path: 'softlayer-process', component: SoftlayerComponent },
  { path: 'cost-dashboard', component: DashboardComponent },
  { path: 'low-dollar', component: LowDollarExceptionComponent },
  { path: 'low-dollar/create', component: LowDollarNewRecordComponent },
  { path: 'error/auth', component: ErrorComponent, data: { forbidden: true } },
  { path: '', redirectTo: '/finance', pathMatch: 'full' },
  {
    path: 'error/badgateway',
    component: ErrorComponent,
    data: { badgateway: true },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 1

在 Angular 中實現這一點的方法是通過Route Guards 。 在高層次上，它是這樣的：

1. 創建 路線守衛。 它根據檢查的條件返回真或假。

2. 將 canActivate 參數添加到需要檢查身份驗證的路由中，例如：

const appRoutes: Routes = [
  { path: 'finance', component: FinanceComponent, canActivate: [AuthGuard] },
  { path: 'cmas-process', component: CmasComponent, canActivate: [AuthGuard] },

3. 如果用戶未通過身份驗證，則在路由保護中指定重定向（例如到登錄頁面）：

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {
  constructor(
    private authService: AuthService,
    private logger: NGXLogger,
    private router: Router
  ) {}

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> {

    return this.authService.isLoggedIn().pipe(
      map(isLoggedIn => {
        if (!isLoggedIn) {
          return this.router.parseUrl('/login');
        }

        return true;
      })
    );
  }
}