Я сделал проект на Angular 8 и включил оба ngx-translate (https://github.com/ngx-translate/core) и логин с использованием Auth0 (https://auth0.com/docs/quickstart/spa/angular2/01-login#install-the-sdk). Они хорошо работают по отдельности, но у меня возникает странная ошибка, когда они вместе.
Я получаю эту ошибку для каждого переведенного текста html в моем проекте в консоли.
core.js:6014 ERROR
{error: "login_required", error_description: "Login required", state: "aGNHczdqZTRjMzFTM3ZtWnpIOS1kQjdXaXV2dktyVW94ZkdsYm5KVGhRSA=="}
error: "login_required"
error_description: "Login required"
state: "aGNHczdqZTRjMzFTM3ZtWnpIOS1kQjdXaXV2dktyVW94ZkdsYm5KVGhRSA=="
__proto__: Object
Когда я комментирую поставщика в моем app.module.ts перехватчика, который я сделал, чтобы добавить токен в мои запросы к бэкэнду, перевод работает хорошо, и все в порядке. Но тогда мой токен не будет отправлен на бэкэнд для моих запросов.
providers: [
// {
// provide: HTTP_INTERCEPTORS,
// useClass: InterceptorService,
// multi: true
// }
]
И когда я комментирую язык по умолчанию в моем AppComponent, у меня больше нет ошибок, токен отправляется на бэкэнд в моих запросах. Но тогда я не вижу текста в моем интерфейсе, потому что он не переведен.
export class AppComponent {
constructor(public translate: TranslateService) {
// translate.setDefaultLang('en');
}
}
Сначала кажется, что ошибка указывает на то, что я не вошел в систему, но она делает то же самое, когда я вхожу в систему.
Вот код моего класса перехватчика
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { mergeMap, catchError } from 'rxjs/operators';
import { AuthService } from './authentication/auth.service';
@Injectable({
providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {
constructor(private authService: AuthService) { }
public intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return this.authService.getTokenSilently$().pipe(
mergeMap(token => {
const tokenReq = req.clone({
setHeaders: { Authorization: `Bearer ${token}` }
});
return next.handle(tokenReq);
}),
catchError(err => throwError(err))
);
}
}
Спасибо