Angular 中如何使用core.Module.ts

Angular项目中的统一APItoken配置

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #javascript #ecmascript

本文介绍了如何在Angular项目中设置一个全局的API请求token，通过使用HttpClientModule和Angular-JWT库，配合自定义的JWT_OPTIONS工厂函数，确保跨模块的认证请求。

简单记录，在angular项目中配置统一的api请求token，代码见下图

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { UserAuthService } from '../app/services/user-auth.service';
import { EnvironmentService } from './services/environment.service';

export function jwtOptionsFactory(
  authService: UserAuthService,
  env: EnvironmentService
) {
  return {
    tokenGetter: () => {
      if (authService.loggedUser()) {
        return authService.loggedUser().token
          ? authService.loggedUser().token.access_token
          : null;
      }
      return null;
    },
    whitelistedDomains: [
      `${env.config.serviceUrl}`.replace(/(http|https):\/\//, '').split('/')[0],
    ],
  };
}

@NgModule({
  declarations: [],
  imports: [
    HttpClientModule,
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [UserAuthService, EnvironmentService],
      },
    }),
  ],
  exports: [],
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() core: CoreModule) {
    if (core) {
      throw new Error('You should import core module only in the root module');
    }
  }
}