如何修复Angular 15中的‘401 ERROR Unauthorized’未授权错误

问题说明 #

组件无法正常加载，请求协助修复该错误。

相关信息 #

• 相关截图：
  • 截图1
  • 截图2

错误拦截器代码（error.interceptor.ts） #

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private accountService: AccountService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if ([401, 403].includes(err.status) && this.accountService.accountValue) {
                this.accountService.logout();
            }

            const error = (err && err.error && err.error.message) || err.statusText;
            console.error(err);
            return throwError(error);
        }))
    }
}

排查修复方向 #

1. 确认拦截器注册状态
   检查app.module.ts或对应功能模块中，是否已将ErrorInterceptor正确注册为HTTP拦截器提供者，示例代码如下：

   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
   ]
   

   未正确注册会导致拦截器不生效，引发请求处理异常，进而阻断组件加载流程。

2. 校验AccountService依赖逻辑
   确认AccountService已正常注入，且accountValue属性的初始化、更新逻辑无错误。若accountValue未初始化就被访问，会触发未定义错误，中断请求处理。

3. 查看控制台完整错误栈
   代码中已通过console.error(err)输出错误详情，打开浏览器控制台（F12）查看完整错误信息，定位具体失败的请求地址、错误类型（如跨域、接口500、返回格式异常等）。

4. 适配RxJS版本的throwError写法
   若使用RxJS 7+版本，throwError需传入工厂函数替代直接传值，避免上下文异常，修改后代码：

   import { throwError } from 'rxjs';
   // ...
   return throwError(() => error);
   

5. 检查组件的请求依赖逻辑
   若组件加载依赖某HTTP请求的返回数据，需在组件中添加请求错误捕获逻辑，避免因请求失败导致组件无数据渲染而崩溃。

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