【问题标题】:Angular router in external interceptor lib/module外部拦截器库/模块中的角度路由器
【发布时间】:2019-11-12 18:44:11
【问题描述】:

我正在创建一个外部库,主要目的是为我的所有网络应用程序实现一个独特的拦截器。

基本上我创建了一个 Angular 库,并在我的网络应用程序中实现了该库,它可以工作,但是当我需要通过 Angular 路由器重定向到另一个内部路由时,这是不可能的。

我的问题是:有没有其他方法可以做到这一点?或者我可以创建一个自定义路由器并将路由传递给外部库以便将路由设置到自定义路由器? 将路由器依赖注入外部库拦截器怎么样?那可能吗?

我的代码:

App.module

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

//Libs
import { AuthInterceptor } from 'auth-lib';
import { HeaderComponent } from './shared/layout/header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    ForbiddenComponent,
    MenuComponent,
    BasicComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    ProfileService,
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: APP_BASE_HREF, useValue: '/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

外部拦截器库

@Injectable({
    providedIn: 'root'
})
export class AuthInterceptor implements HttpInterceptor {

    constructor (private router: Router) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(catchError(error => {
                    this.handleAuthError(error);
                    return of(error);
                    }) as any);
    }

    private handleAuthError(error: HttpErrorResponse): Observable<any> {
        if (error.status === FORBIDDEN) {
            console.log('SESSION STATUS: FORDIBBEN');
            //window.location.href = ERR_AUTH_URL; //Redirect works, but this refresh the web app
            this.router.navigate([ERR_AUTH_URL]);
        }
        throw error;
    }

}

【问题讨论】:

  • 您希望您的身份验证库重定向到使用它的应用程序指定的 url?
  • 这是正确的,例如在上面的代码中,当状态为 FORBIDDEN 时,我需要重定向到 ERR_AUTH_URL(变量值 = 'error'),该路由在网络应用程序中映射
  • 您需要做的就是定义一个注入令牌(或多个令牌)并让应用程序为该令牌提供值,就像您使用 APP_BASE_HREF 所做的那样。
  • 我不是 Angular 方面的专家,你有这方面的例子吗?

标签: angular angular6 angular-router angular-http-interceptors angular-library


【解决方案1】:

更新:我刚刚找到了解决方案,我只修改了这一行

{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, deps: [Router], multi: true },

它按我的预期工作

【讨论】:

    猜你喜欢
    • 2021-02-03
    • 2017-10-09
    • 2014-10-25
    • 2023-03-07
    • 2016-02-02
    • 2018-07-25
    • 2018-03-10
    • 2019-07-09
    • 1970-01-01
    相关资源
    最近更新 更多