Question

我想在Angular 6中使用Interceptor从REST api（需要授权“用户名”和“密码”访问）的主页上显示数据。但是，以前我曾使用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）以获取可观察的数据。但是，它不符合我的预期。

我可以在拦截器中获得“令牌”。等待一些建议。

谢谢。

Answer 1

HttpParams 是immutable。

您需要使用setParams而不是params：

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

您确定敏感数据应作为params传递吗？

使用headers会更好吗？

使用Interceptor Angular 6将数据从REST API加载到登录页面

1 个答案: