ngx-translate如何在用户完成认证后再加载翻译资源？

以下两种方案均可满足不公开翻译资源、按需加载的需求： #

方案1：翻译资源打包进应用包（完全不走HTTP请求，适合翻译量小、内容固定的场景） #

该方案直接将翻译文件打包到JS Chunk中，不会作为静态资源对外暴露，无需额外接口支持：

• 把原/assets/i18n/下的翻译JSON文件移动到src/app/下的非公开目录，比如src/app/i18n/
• 自定义TranslateLoader替换原有TranslateHttpLoader，代码如下：

import { TranslateLoader } from '@ngx-translate/core';
import { Observable, of } from 'rxjs';
// 直接导入本地翻译文件
import zhCN from './i18n/zh-CN.json';
import enUS from './i18n/en-US.json';

export class PackagedTranslateLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    const translationMap = {
      'zh-CN': zhCN,
      'en-US': enUS
    };
    return of(translationMap[lang] ?? translationMap['zh-CN']);
  }
}

• 修改app.module.ts中TranslateModule的配置：

@NgModule({
  imports: [
    // 其余模块省略
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: PackagedTranslateLoader
      }
    })
  ]
})
export class AppModule {}

方案2：认证后从受保护接口拉取翻译资源（适合翻译量大、需要动态更新的场景） #

该方案翻译资源存在后端，仅认证通过的用户可以拉取：

• 后端提供带权限校验的翻译接口，比如GET /api/i18n/:lang，请求需要携带合法认证token才可返回数据
• 自定义带认证逻辑的TranslateLoader，未登录时仅返回登录页所需的极简翻译，登录后拉取全量翻译：

import { TranslateLoader } from '@ngx-translate/core';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service'; // 替换为你项目中的认证服务

export class AuthProtectedTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient, private authService: AuthService) {}

  getTranslation(lang: string): Observable<any> {
    // 未登录状态返回登录页所需最小翻译集，不会发起接口请求
    if (!this.authService.checkAuth()) {
      return of({
        'login.username': '用户名',
        'login.password': '密码',
        'login.submit': '登录'
        // 其余登录页相关文案按需补充
      });
    }
    // 已登录状态携带认证token请求受保护的翻译接口
    const headers = new HttpHeaders({
      Authorization: `Bearer ${this.authService.getToken()}`
    });
    return this.http.get(`/api/i18n/${lang}`, { headers });
  }
}

• 修改app.module.ts中TranslateModule的配置，注入所需依赖：

export function AuthLoaderFactory(http: HttpClient, authService: AuthService) {
  return new AuthProtectedTranslateLoader(http, authService);
}

@NgModule({
  imports: [
    // 其余模块省略
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: AuthLoaderFactory,
        deps: [HttpClient, AuthService]
      }
    })
  ]
})
export class AppModule {}

• 如果需要完全等待用户认证通过后再加载翻译，可在登录成功的回调中手动调用translateService.use(lang)触发全量翻译加载即可。

内容的提问来源于stack exchange，提问作者ChrisBurns