您提供了 'undefined' 在 http get in angular 7 中预期流的位置

Question

我正在尝试在验证登录凭据后发送 OTP。登录凭据得到验证并生成 JWT 令牌。我已经在邮递员上测试了 API 并且它有效（即我收到带有 OTP 的电子邮件）但问题出在 FE 方面。唯一的问题是我没有收到电子邮件。

//服务从这里开始

user_login(username: string, password: string) {
var data = "username=" + username + "&password=" + password + 
"&grant_type=password";
var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www- 
urlencoded', 'No-Auth': 'True' });

return this.http.post<any>(this.rootUrl + '/token', data, { headers: 
reqHeader })
  .pipe(map(data => {
    // console.log(data, 'in service');
    // login successful if there's a jwt token in the response
    if (data && data.access_token) {
      console.log("data & token");
      // store user details and jwt token in local storage to keep user 
      logged in between page refreshes
      localStorage.setItem('temp', data.access_token);
    }
    return data;
  }));
}

 send_otp(username: string): Observable<any> {
 console.log('send_otp: ' + username);
 let url = this.rootUrl + '/api/account/SendOTP?email=' + username;
 console.log(url);
 return this.http.get(url)
  .pipe(
    map(data => {
      return data;
    }),
    catchError(x => {

   console.log(x);
      return throwError(x);
    }));
   }

  // .ts code here
  if (event == "login") {
  // console.log('hi');
  this.authenticationService.user_login(this.f.username.value, 
  this.f.password.value)
    .pipe(first())
    .subscribe(
      data => {
        console.log(data, 'in ts');


  this.authenticationService.send_otp(this.f.username.value).subscribe(x => 
  {
          console.log("otp sent");
        });

      },
      error => {
        this.isLoginError = true;
        this.loading = false;
      });
   }

预计：发送OTP到指定邮箱。

编辑：

export class AuthInterceptor implements HttpInterceptor {

constructor(private router: Router) { }

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

if (req.headers.get('No-Auth') == "True")
return next.handle(req.clone());

if (localStorage.getItem('currentUser') != null ) {
const clonedreq = req.clone({
headers: req.headers.set("Authorization", "Bearer " + localStorage.getItem('currentUser'))
});
return next.handle(clonedreq)
.pipe(tap(
succ => { },
err => {
//if (err.status === 401)
//this.router.navigateByUrl('/login');
}
));
}
else {
this.router.navigateByUrl('/login');
}
}
}

Answer 1

从服务器获取令牌后，您使用密钥 temp

将其保存在本地存储中

localStorage.setItem('temp', data.access_token);

但是如果你仔细观察 AuthInterceptor 你会发现你只处理以下条件的 http 请求

if (req.headers.get('No-Auth') == "True"){
  ....
}

if (localStorage.getItem('currentUser') != null ) {
  ....
}

但不适用于本地存储中的 temp 密钥。

这就是你会收到此错误的原因

You provided 'undefined' where a stream was expected

所以为了摆脱这个错误，你需要修改第二个条件来检查temp密钥中的访问令牌是否存在，比如

if (localStorage.getItem('currentUser') != null ||  localStorage.getItem('temp') != null) {
 ....
}

希望对您有所帮助。

您提供了 'undefined' 在 http get in angular 7 中预期流的位置

You provided 'undefined' where a stream was expected in http get in angular 7

angular

angular7