Question

我在这里更新我的问题。基本上，我想登录系统。它可以工作，但服务不会向LoginComponent返回正确的Observable类型。我使用httpclient进行拦截。现在我可以读取登录尝试的成功和失败（来自服务器的自定义消息，具有http状态）但是我无法返回对登录组件的正确响应，因此错误。

当我单击登录按钮时，会生成令牌或从服务器返回正确的消息。但我继续在我的控制台中收到错误（因此，无法重定向到仪表板）：

this.authenticationservice.login（...）为空

我尝试返回字符串或数字（服务器代码或消息），但后续跟着另一个错误。如果有帮助，我会关注here的教程，但作者不回答问题。

login.component.ts：

addPost(post) {

   this.authenticationservice.login(post).subscribe(
      res => {

      console.log(res);

        if(res['status']== 200)
          {
             this.router.navigate([this.returnUrl]);
          }else{
            this.loginError = true
            this.loginAlert = res.message;
            console.log('here');
          }
      },
       err => {
        return err;

      }

我的服务：

@Injectable()
export class DataService {
  private url: string = environment.apiURL + 'start/login/';
  constructor(private http: HttpClient) { }
  login(post): Observable<any> {

  let send_data ={
  username: post['username'],
  password:post['password'],
  client_id:environment.client_id,
  client_secret:environment.client_secret,
  grant_type:environment.grant_type
  };

 interface LoginResponse {
  access_token: string;
  first_name: string;
  last_time: string;
  token_type: string;
  expire_on:string;
  lang:string;
  groups:string[];
};

let reply = {
    message:'',
    status:400
}


 this.http.post<LoginResponse>(environment.apiURL + 'start/login/', send_data,{ observe: 'response' }).subscribe(
      data => {
        //console.log("User Login: " + data.access_token);
        console.log(data);
        reply['status']=200;

        return data;

      },
      (err: HttpErrorResponse) => {



        if (err.error instanceof Error) {
          console.log("Client-side error occured.");

        } else {
         console.log(err.error['detail']);
          console.log("Server-side error occured.");


        }
      }
    );



    return null;



  }


  logout() {
    localStorage.removeItem('currentUser');
  }

}

Answer 1

然后我想在每个请求上发送令牌，但它失败了

您必须使用HTTP拦截器才能实现此目的。您可以关注this教程。

然而，它并没有从后端捕获错误，后端回复状态为200或400（到目前为止只捕获了200个）

这是因为

我更喜欢将一个字符串（来自后端的错误）发送到我的登录组件。

如果您从服务器发送正确的错误响应，那么它就会抓住它。 Angular不知道字符串是成功还是错误。但如果坚持字符串响应，那么您可以手动检查错误代码。

强烈建议使用正确的错误响应。

Angular 4：错误this.authenticationservice.login（...）在LoginComponent中为null

1 个答案: