网络请求返回401响应后页面自动刷新问题解决方案咨询

这个问题其实挺常见的，尤其是在处理身份认证类HTTP错误时，我帮你梳理下可能的触发点和解决思路：

最可能的元凶：未阻止事件默认行为 #

看你错误回调里写了event.preventDefault()，但位置不对！如果这个API调用是在表单提交、链接点击这类会触发页面跳转/刷新的事件里触发的，你得在事件触发的最开始就阻止默认行为，而不是等错误发生才处理。

举个例子，如果你的调用是绑定在表单提交事件上：

<form (submit)="handleSubmit($event)">
  <!-- 表单内容 -->
</form>

那handleSubmit方法里必须先阻止默认行为：

handleSubmit(event: Event) {
  // 先阻止表单默认提交行为，这一步必须放在最前面！
  event.preventDefault();
  
  this.myService.myMethod(server, id)
    .subscribe(data => { /* 成功逻辑 */ }, err => { /* 错误逻辑 */ });
}

你之前把event.preventDefault()放在错误回调里，这时候默认的页面刷新行为已经触发了，自然没用。

第二大嫌疑：全局HTTP拦截器的401处理 #

如果你的项目里用了Angular的HttpInterceptor做全局HTTP请求拦截，检查下拦截器里处理401错误的逻辑——很多开发者会在拦截器里写“401就跳登录页/刷新页面”的逻辑，比如：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    catchError(error => {
      if (error.status === 401) {
        // 这里如果用了window.location.reload()或者跳转，会直接触发页面刷新
        window.location.href = '/login';
      }
      return throwError(() => error);
    })
  );
}

如果是这种情况，你可以给需要跳过全局跳转的请求加个自定义标记，比如：

// 在调用API时添加自定义头
const headers = new HttpHeaders()
  .append('Authorization', 'Token=' + this._token)
  .append('Skip-Auth-Redirect', 'true');

return this.httpClient.post(url, body, { headers });

然后在拦截器里判断：

if (error.status === 401 && !req.headers.has('Skip-Auth-Redirect')) {
  // 只对需要跳转的请求执行逻辑
  window.location.href = '/login';
}

可选优化：修正RxJS错误处理写法 #

你的代码里用的是RxJS 5的旧写法，如果你用的是Angular 6+（对应RxJS 6+），建议改成pipeable操作符，同时注意HttpClient默认已经解析了JSON响应：

import { map, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

public myMethod(server: string, id: string): Observable<any> { 
  const url: string = ...; 
  // HttpHeaders是不可变对象，append会返回新实例
  const headers = new HttpHeaders().append('Authorization', 'Token=' + this._token); 
  const body = { server, id }; 
  
  return this.httpClient.post(url, body, { headers }) 
    .pipe(
      map(res => res), // HttpClient默认已解析JSON，无需res.json()
      catchError((error: any) => throwError(() => error.error)) // error.error是服务器返回的错误体
    ); 
}

调试小技巧：定位刷新触发源 #

你可以在错误回调里加console.log(err)，同时打开浏览器Network面板查看401响应的详细信息。另外，也可以全局监听页面刷新事件，排查是谁触发了刷新：

window.addEventListener('beforeunload', (event) => {
  console.log('页面即将刷新', event);
  // 这里可以打调用栈，帮助定位触发点
  console.trace();
});

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