각도가 느슨한로드 된 모듈 401

Question

각도의 cli를 사용하여 여러 개의 지연 모듈을로드하는 각도 앱을 개발 중입니다. 리소스 (js, css 및 html)에는 쿠키에 의해 설정된 권한 부여가 필요합니다. 첫 번째 페이지를로드 할 때 사용자가 로그인하지 않은 경우 SSO 로그인 페이지로 리디렉션 된 다음 성공적으로 승인되면 앱으로 돌아갑니다. 이 흐름은 내가 바꿀 수있는 것이 아닙니다.

사용자가 하나의 모듈을로드하면 잠시 동안 해당 모듈에서 작동하고 페이지가 열린 채로 남아 있지만 낮 동안에는 더 이상 작동하지 않는 문제가 있습니다. 사용자가 다음 날이 다른 게으른 모듈을 필요로하는 라우트를로드하는 것으로 시작하면, 그 모듈은 더 이상 인증되지 않으므로 401을 리턴합니다. 그러나 사용자는 아무것도로드하지 못하고 모듈이로드되지 않았 음을 알 수 없습니다.

게으른로드 모듈을로드 할 수 없을 때 사용자에게 로그인 페이지로 리디렉션 할 수있는시기를 알리는 방법을 찾고 있습니다. 이것이 가능한가?

Answer 1

lazyloaded 모듈을 미리로드하는 PreloadingStrategy을 사용하면 응용 프로그램이 더 이상 인증되지 않으면 라우트 변경시 특정 모듈을 가져올 필요가 없으므로이를 방지 할 수 있습니다.

프리로드 - strategy.ts

import { PreloadingStrategy, Route } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { of } from 'rxjs/observable/of'; 

export class PreloadSelectedModulesList implements PreloadingStrategy { 
    preload(route: Route, load: Function): Observable<any> { 
    return route.data && route.data['preload'] ? load() : of(null); 
    } 
} 

앱 routing.module.ts (요 파파 repo link에서 촬영)

import { PreloadSelectedModulesList } from './core/preload-strategy'; 
    const routes: Routes = [ 
     // Eagerly loaded 
     { path: '', component: HomeComponent, pathMatch: 'full' }, 
     // Preloaded module 
     { path: 'preloaded', loadChildren: './preloaded/preloaded.module#PreloadModule', data: {preload: true}}, 
     // Lazy loaded module 
     { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'} 
    ]; 

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(routes, { 
      preloadingStrategy: PreloadSelectedModulesList 
     }) 
    ], 
    exports: [RouterModule], 
    providers: [ PreloadSelectedModulesList, ..., ... ] 
}) 

export class AppRoutingModule { } 

여전히 위치를 사용자가 갑자기 작은 에지 경우가있을 수 있습니다 모듈을 얻으려고 시도하는 중에 권한이 없어진 경우이 경우 Abris 위에 언급 된대로 Angulars ErrorHandler을 확장하고 모듈로드에 발생하는 오류를 확인할 수 있습니다.

오류 handler.ts

import { ErrorHandler } from '@angular/core'; 

export default class MyErrorHandler extends ErrorHandler { 

constructor() { 
    super(); 
} 

    handleError(error) { 
     // Check and take appropriate actions 
     ... 
     // delegate to the default handler 
     super.handleError(error); 

    } 
}