Angular 中的 401 和 403 错误处理

在前端开发中，我们经常会遇到 HTTP 响应状态码为 401 和 403 的错误。这两种错误都表示用户没有权限访问该资源。但是，它们之间还是有所不同的。在本文中，我们将介绍 Angular 中如何处理这两种错误，并提供示例代码。

401 错误

401 错误表示用户未经身份验证就尝试访问受保护的资源。在 Angular 中，我们可以使用 HttpInterceptor 来捕获这种错误并采取相应的措施。下面是一个示例：

// javascriptcn.com 代码示例
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = this.authService.getAuthToken();

    if (authToken) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${authToken}`
        }
      });
    }

    return next.handle(request).pipe(
      catchError(err => {
        if (err.status === 401) {
          this.authService.logout();
          location.reload();
        }

        return throwError(err);
      })
    );
  }
}

在上面的代码中，我们通过 AuthInterceptor 拦截器来为每个 HTTP 请求添加身份验证令牌。如果请求返回 401 错误，我们将用户注销并重新加载页面。

403 错误

403 错误表示用户已经经过身份验证，但是没有权限访问该资源。在 Angular 中处理这种错误的方法与处理 401 错误的方法类似。下面是一个示例：

// javascriptcn.com 代码示例
@Injectable()
export class PermissionInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = this.authService.getAuthToken();

    if (authToken) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${authToken}`
        }
      });
    }

    return next.handle(request).pipe(
      catchError(err => {
        if (err.status === 403) {
          // 处理 403 错误
        }

        return throwError(err);
      })
    );
  }
}

在上面的代码中，我们通过 PermissionInterceptor 拦截器来为每个 HTTP 请求添加身份验证令牌。如果请求返回 403 错误，我们可以根据具体情况采取相应的措施，比如显示错误提示或者跳转到错误页面。

总结

在本文中，我们介绍了 Angular 中如何处理 401 和 403 错误。通过使用 HttpInterceptor 拦截器，我们可以为每个 HTTP 请求添加身份验证令牌，并在发生错误时采取相应的措施。这些技术对于构建安全的 Web 应用程序非常重要，我们应该在实际开发中加以应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658010fbd2f5e1655db25dba