Я извлекаю данные из бэкэнда и показываю их в таблице матов, эта таблица отображается на компоненте внутри загруженного модуля с отложенным доступом. Кажется, все работает нормально, пока я не обновляю страницу из браузера (или она обновляется сама по себе, пока работает ng serve и я пишу код, именно так я и обнаружил ошибку).
Вклпри обновлении страницы данные, полученные из API, больше не отображаются. Он работает при переходе с другой страницы.
Я использую Django rest framework на сервере для обслуживания API для углового клиента. Мое приложение аутентифицирует пользователя в бэкэнде с использованием JWT, а во внешнем интерфейсе использует firebase.
Я использую перехватчики Http для добавления токена JWT ко всем запросам Http.
auth.service.tsчтобы получить токен
getToken() {
let tokenPromise = new Promise ((resolve, reject) => {
this.afAuth.auth.onAuthStateChanged( user => {
if (user) {
this.afAuth.auth.currentUser.getIdToken()
.then(token => {
this.userToken = token;
});
}
if (this.userToken) {
resolve(this.userToken);
}
});
});
return tokenPromise;
}
api.service.ts для отправки http запроса
public getEmployees(): Observable<Employee[]> {
return this.http.get<Employee[]>(`${this.url}/employee/`);
}
token-interceptor.service.ts для добавления токена
@Injectable({
providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {
constructor(private authService: AuthService) { }
intercept(req, next): Observable<any> {
return from(this.authService.getToken()).pipe(
switchMap(token => {
const headers = req.headers
.set('Authorization', 'JWT ' + token)
.append('Content-Type', 'application/json');
const reqClone = req.clone({
headers
});
return next.handle(reqClone);
}));
}
}
На вкладке сети инструмента разработчика браузера Chrome видно, что сотрудник / выбирается при обычной навигации, но при обновлении браузера сотрудника / больше не существует.
Структура проекта
.
├── app.component.html
├── app.component.scss
├── app.component.ts
├── app.module.ts
├── dashboard
│ ├── dashboard.component.html
│ ├── dashboard.component.scss
│ ├── dashboard.component.ts
│ ├── dashboard.module.ts
│ └── dashboard-routing.module.ts
├── firebaseauth
│ ├── sign-in
│ ├── sign-up
│ └── verify-email
├── hrm
│ ├── add-employee
│ │ ├── add-employee.component.html
│ │ ├── add-employee.component.scss
│ │ └── add-employee.component.ts
│ ├── employee-list
│ │ ├── employee-list.component.html
│ │ ├── employee-list.component.scss
│ │ └── employee-list.component.ts
│ ├── hrm.module.ts
│ └── hrm-routing.module.ts
└── shared
├── component
│ └── loader
├── guard
│ ├── auth.guard.ts
│ └── secure-inner-pages.guard.ts
├── models
│ ├── employee.model.ts
│ └── user.ts
├── routing
│ └── app-routing.module.ts
└── services
├── api.service.ts
├── auth.service.ts
├── loader-interceptor.service.ts
├── loader.service.ts
└── token-interceptor.service.ts