Как это работает с вами?
учше всего использовать службу основного модуля в лениво загруженном функциональном модуле и дочерних модулях.
В соответствии с угловым стилем у меня есть следующее
app
-core
- core.module.ts
-logger.service.ts
-token-interceptor.service.ts
-authentication.service.ts
-shared
-shared.module.ts
-base module (my feature base , lazy loaded with router-outlet)
-base.module.ts
-base.routing.module.ts
-base
-base.component.ts
-admin (lazy loaded , child module of base module)
-admin.module.ts
-admin.routing.ts
-admin-component.ts
-report(lazy loaded , child module of base module, sibling of admin)
-report.module.ts
-report.routing.ts
-report-component.ts
Если я добавлю TokenInterceptorService в качестве поставщика во все функциональные модули, то перехватчик HTTP будет работать. Когда я добавляю его в модуль приложения (но не в модуль загрузки с отложенной загрузкой), он не перехватывает запрос http, запущенный в модуле загрузки с отложенной загрузкой.
Какова лучшая практика использования сервисов / перехватчиков, объявленных в основном модуле.
app.module.ts
@NgModule({
declarations: [
AppComponent,
LoginComponent,
],
imports: [
BrowserModule,BrowserAnimationsModule, CoreModule, AppRoutingModule, FormsModule
], providers: [{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true }],
bootstrap: [AppComponent]
})
export class AppModule { }
приложение-routing.module.ts
@NgModule({
imports: [
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'base', pathMatch: 'full' },
{ path: 'base', loadChildren: 'app/base/base.module#BaseModule' }
])
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
core.module.ts
@NgModule({
imports: [
CommonModule, HttpModule,
],
declarations: [],
providers: [LoggerService, AuthenticationService]
})
export class CoreModule {
constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
}
лексем-interceptor.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import { AuthenticationService } from './authentication.service';
@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
constructor(public auth: AuthenticationService, private router: Router) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('Adding authorization header')
request = request.clone({
setHeaders: { authorization: this.auth.getToken() }
});
console.log('Added authorization header')
return next.handle(request).do(event => { }, (err: HttpErrorResponse) => {
console.log("Error ===>", err);
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
console.log('An error occurred:', err.error.message);
} else if (err.status == 401) {
console.log('Status 401 unautorized');
this.router.navigate(['/login']);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
}
return Observable.throw(new Error('Your custom error'));
});;
}
}
base.module.ts
@NgModule({
imports: [
CommonModule, BaseRoutingModule
],
declarations: [BaseComponent],
providers: [],
})
export class BaseModule {
constructor( @Optional() @SkipSelf() parentModule: BaseModule) {
if (parentModule) {
throw new Error(
'BaseModule is already loaded. Import it in the AppModule only');
}
}
}
base.routing.module.ts
@NgModule({
imports: [
RouterModule.forChild([
{
path: '', component: BaseComponent,
children: [
{ path: '', redirectTo: 'admin', pathMatch: 'full' },
{ path: 'admin', loadChildren: 'app/base/admin/admin.module#AdminModule' },
]
}])
],
exports: [
RouterModule
]
})
export class BaseRoutingModule {
}
admin.module.ts
@NgModule({
imports: [
CommonModule, FormsModule, HttpClientModule, AdminRoutingModule,BusyModule
],
declarations: [UserListComponent, UserComponent, MenuListComponent, MenuComponent, CodeListComponent, CodeComponent],
providers: [CodeService, UserService, MenuService,{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true }]
})
export class AdminModule { }
admin.routing.module.ts
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
children: [
{ path: '', redirectTo:'code-list', pathMatch: 'full' },
{ path: 'code-list', component: CodeListComponent },
{ path: 'code/:id', component: CodeComponent },
{ path: 'user-list', component: UserListComponent },
{ path: 'user/:id', component: UserComponent },
{ path: 'menu-list', component: MenuListComponent },
{ path: 'menu/:id', component: MenuComponent },
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {
}