Загрузите данные на целевую страницу из REST api с помощью Interceptor Angular 6

Я хочу показать данные на домашней странице из REST api (требуется авторизация «имя пользователя» и «пароль» для доступа) с помощью Interceptor в Angular 6. Однако раньше я использовал Node.js для получения данных, и это было довольно красиво. успешный в то время. Более того, когда я переключаюсь на перехватчик, он показывает следующую ошибку:

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:41)
at subscribeToResult (subscribeToResult.js:6)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:70)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:67)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Observable._subscribe (scalar.js:5)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)

В своем решении я создал функцию в компоненте посадки, которая выглядит так:

const userData = { username: 'anonymous', password: '' };

this.http
  .post(`${this.baseURL}/auth/jwt/authenticate`, userData)
  .subscribe(res => {
    // console.log(res);
    const token = JSON.parse(res['_body']).token;
    this.publicToken = token;
    if (token) {
      this.publicTokenStatusListener.next(true);
      localStorage.setItem('public-token', token);
    }
  });

Перехватчик выглядит так:

intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {

const authToken = localStorage.getItem('public-token');

        
const copiedReq = req.clone({
    params: req.params.set('auth', authToken)
});

return next.handle(copiedReq);

}

Из службы я возвращаю данные REST (GET) для получения наблюдаемого. Однако это не работает, как я ожидал.

Я могу получить «жетон» в перехватчике. Жду предложений.

Заранее спасибо.


typescript javascript angular angular-http-interceptors
person Yasir Arefin    schedule 06.10.2018    source источник
comment
Интересно, следует ли вам устанавливать headers, а не params, когда вы клонируете запрос. Что-нибудь, что можно попробовать?   -  person R. Richards    schedule 06.10.2018
comment
Привет, @ R.Richards, большое спасибо за ваш комментарий. Я также пробовал с заголовками. Однако результат все тот же.   -  person Yasir Arefin    schedule 06.10.2018
comment
предоставьте полную часть кода с imports для interceptor, а также providers часть основного @NgModule   -  person un.spike    schedule 06.10.2018

Ответы (1)


arrow_upward
0
arrow_downward

HttpParams является неизменным.

Вам нужно использовать setParams вместо params:

const copiedReq = req.clone({
    setParams: {'auth': authToken}
});

Вы уверены, что конфиденциальные данные следует передавать как params?

Может, лучше использовать headers?

person un.spike    schedule 06.10.2018