Angular登录系统：除响应参数外，如何检测登录失败？

嘿，我来给你支几招！除了靠响应参数判断登录失败，其实还有两种更稳妥的方式来处理401这类错误，刚好适配你的Angular项目：

1. 直接在登录请求里捕获HttpErrorResponse #

你现在的代码只处理了请求成功的情况，但当后端返回401时，Observable会抛出错误，你的组件订阅根本走不到result==false的分支——这也是你现在遇到的核心问题对吧？

可以在AuthService的login方法里添加错误捕获逻辑，专门处理401状态码：

修改后的auth.service.ts代码：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpClient, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';

@Injectable()
export class AuthService {
  public token: string;

  constructor(private http: HttpClient) {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    this.token = currentUser && currentUser.id;
  }

  public login(username:string, password:string){
    return this.http.post<any>('http://localhost:3000/api/v1/users/login', {username:username, password:password})
      .map((res) => {
        console.log(res);
        let token = res.id ;
        let id = res.userId ;
        // login successful if there's a jwt token in the response
        if (token) {
          this.token = token;
          localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token, id:id }));
          return true;
        } else {
          return false;
        }
      })
      .catch((error: HttpErrorResponse) => {
        // 精准捕获401未授权错误
        if (error.status === 401) {
          // 清除本地可能残留的无效用户信息
          localStorage.removeItem('currentUser');
          this.token = null;
          // 返回false，让组件知道登录失败
          return Observable.of(false);
        }
        // 其他类型的错误（比如网络异常）重新抛出，交给上层处理
        return Observable.throw(error);
      });
  }

  // 新增logout方法，后续全局拦截器会用到
  public logout() {
    localStorage.removeItem('currentUser');
    this.token = null;
  }
}

然后在login-form.component.ts的订阅里加上错误回调，处理其他意外情况：

login() {
  this.loading = true;
  this.authService.login(this.model.username, this.model.password)
    .subscribe(
      result => {
        console.log(result);
        if (result==true) {
          this.loading = false;
          this.alertService.success('Success', true);
          // this.router.navigate(['/']);
        } else {
          this.error = 'Username or password is incorrect';
          this.loading = false;
        }
      },
      error => {
        // 处理网络错误、服务器内部错误等其他情况
        this.error = '登录失败，请检查网络或稍后重试';
        this.loading = false;
        this.alertService.error(this.error);
      }
    );
}

这样不管是后端返回401，还是响应里没有token，你的组件都能正确识别登录失败。

2. 用全局HTTP拦截器统一处理401 #

如果你的项目里还有其他API请求也可能返回401（比如登录过期），用全局拦截器会更省心——不用每个请求都写重复的错误捕获逻辑。

首先创建一个拦截器文件auth.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService, private router: Router) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 统一清除用户信息
          this.authService.logout();
          // 跳转到登录页
          this.router.navigate(['/login']);
          // 提示用户
          alert('登录凭证无效，请重新登录');
        }
        return throwError(error);
      })
    );
  }
}

然后在app.module.ts里注册这个拦截器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
// 其他必要的导入

@NgModule({
  declarations: [
    // 你的组件声明
  ],
  imports: [
    BrowserModule,
    // 其他模块导入
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器并存
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

这样所有HTTP请求返回401时，都会自动触发登出、跳转登录页的逻辑，登录请求的错误也会被覆盖处理——当然你也可以根据请求URL判断是否是登录请求，做特殊定制。

总结 #

• 如果你只需要处理登录请求的失败，第一种方式就足够精准；
• 如果项目里有多个需要鉴权的API，全局拦截器能帮你减少重复代码，统一处理401场景。

内容的提问来源于stack exchange，提问作者charsi