强制角应用程序在会话过期时重定向

Question

我有一个角度应用程序，它需要来自OIDC服务的会话授权。使用正常/愉快的路径，一个单独的NodeJS/Express应用程序检查会话授权和重定向到OIDC授权/身份验证服务，并附加相关的头文件。如果一切都通过了，中间件就会路由到角应用程序。

不过，在某种程度上，这个角度应用程序运行的令牌是过期的。该角形应用程序获得用户名，在这一点上，我可以检查过期。然而，如果它是过期的，我需要角度的方式对错误条件作出反应，通过重新路由整个角度应用到相关的中间件页面。因为指示器将被嵌套在应用程序中的组件上，所以我不知道如何让小组件重定向更大的/包含的应用程序。

我不是一个有角的人，所以我甚至不知道仰望角的哪一部分。因为我缺乏知识，所以我包含的源文件可能是相关的，也可能不是相关的。

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);
    }
  }
}

app-routing.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

在角度上实现这一目标的方法是通过航路警卫。在高层次上，情况是这样的：

1. 创建航路警卫。它根据它检查的条件返回真或假。
2. 将canActivate参数添加到需要检查以进行身份验证的路由，例如：

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

1. 如果未对用户进行身份验证，则在路由保护程序中指定重定向(例如指向登录页)：

@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;
      })
    );
  }
}