在 Angular 应用中利用 Interceptor 实现 SPA 应用的拦截器和权限控制-JavaScript中文网-JavaScript教程资源分享门户

前言

Angular 是一个强大的前端框架，具有模块化、组件化等优势，可用于开发企业级 Web 应用程序。在实际开发中，我们通常需要对用户进行权限控制，并保证用户能够访问合法的资源。本文将介绍如何利用 Angular 的拦截器和权限控制来实现 SPA（单页应用程序）的访问控制，为读者提供详细的学习指导。

什么是 Interceptor

Interceptor 是 Angular 提供的一种 HTTP 请求预处理器，它可以拦截 HTTP 请求、响应、错误，并允许开发者在请求或响应到达前或到达后对其进行处理。 Interceptor 的工作流程如下：

在 Interceptor 中，我们可以对 HTTP 请求进行处理，例如添加一些请求头、设置请求参数、处理响应错误等。这为我们在开发前端应用时提供了更多的控制权和灵活性。

Interceptor 的使用

创建 Interceptor

我们可以通过 ng generate interceptor 命令来创建 Interceptor，该命令将在项目根目录下的 app/interceptors 文件夹中创建一个名为 auth.interceptor.ts 的文件，并默认实现了 HttpInterceptor 接口。我们需要在 auth.interceptor.ts 中添加适合我们项目的拦截逻辑。以下是一个简单的 Interceptor 示例：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 在此处添加请求头
    const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + this.token) });

    // 处理请求
    return next.handle(authReq);
  }
}

在上述示例中，我们创建了一个名为 AuthInterceptor 的 Interceptor，该 Interceptor 实现了 HttpInterceptor 接口。我们通过 intercept 方法来处理请求，并在请求头部添加了一个 Authorization 信息。

使用 Interceptor

要使用 Interceptor，我们需要将其提供给模块或服务。在此，我们选择将其提供给 HttpClient 服务。我们可以通过在 app.module.ts 中添加以下代码来实现：

// javascriptcn.com 代码示例
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './interceptors/auth.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule {}

在上述代码中，我们将 AuthInterceptor 提供给了 HttpClientModule，并将其添加到 providers 数组中。我们需要在 providers 数组中添加 multi: true，表示让 Angular 知道我们提供的是一个 HTTP 拦截器。

实现 SPA 的访问控制

上述示例中的 AuthInterceptor 可以帮助我们添加请求头信息，但它不能实现权限控制。在实际应用中，我们通常需要通过拦截器和认证服务来实现 SPA 的访问控制。

在这里，我们需要创建一个 Auth 服务来协助我们与认证服务进行通信，并为用户创建身份验证。以下是一个简单的示例：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private readonly _tokenSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);

  constructor(private httpClient: HttpClient) {}

  getToken(): string | null {
    return this._tokenSubject.getValue();
  }

  signIn(username: string, password: string): Observable<any> {
    const url = 'https://your.auth.server.com/signin';
    const body = { username, password };
    return this.httpClient.post(url, body);
  }

  signOut() {
    this._tokenSubject.next(null);
  }
}

在上述示例中，我们定义了一个 AuthService 服务，它负责和认证服务通信，并提供了 signIn 和 signOut 方法来进行用户身份验证。_tokenSubject 是一个行为主题，它用于在应用程序中管理用户的身份验证状态。

现在，我们可以在 AuthInterceptor 中使用 AuthService 服务来实现身份验证和权限控制：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthService } from '../services/auth.service';

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

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 检查 token 是否存在
    const token = this.authService.getToken();
    if (token) {
      // 如果存在，则在请求头中添加 token
      req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
    } else {
      // 否则，抛出错误，跳转到登录页
      return throwError('请先登录！');
    }

    // 处理请求
    return next.handle(req).pipe(
      catchError(error => {
        if (error.status === 401 || error.status === 403) {
          // 如果认证未通过，则跳转到登录页
          this.authService.signOut();
          return throwError('认证未通过，请重新登录！');
        } else {
          return throwError(error);
        }
      })
    );
  }
}

在上述示例中，我们使用 AuthService 服务来检查用户是否已经登录，并从中获取他的身份验证令牌。如果令牌存在，则在请求头中添加 Authorization 信息。如果令牌不存在，则抛出错误并跳转到登录页面。

在拦截响应时，我们检查返回的 HTTP 响应码是否为 401 或 403。如果是，我们将用户注销并抛出错误信息。这将导致用户被重定向到登录页面。

总结

拦截器是 Angular 中非常强大和有用的工具，可以用来处理 HTTP 请求，实现权限控制和资源访问控制。本文通过详细的示例代码，为读者介绍了如何在 Angular 应用中使用 Interceptor 实现 SPA 应用的拦截器和权限控制。如果您正在开发一个前端应用程序，我们相信这篇文章将为您提供有用的信息，帮助您提高应用程序的安全性和构建效率。

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