在Angular中使用JWT认证方法示例

我来详细介绍“在Angular中使用JWT认证方法示例”的完整攻略。

1. 什么是JWT认证方法

JWT（JSON Web Token）是一种用于认证的开放标准，它能够将用户的身份信息通过JSON格式编码成一个安全的Token。在前后端分离的Web应用中，它可以方便地在服务端和客户端之间传递用户身份信息，实现认证和授权功能。

2. 在Angular中使用JWT认证方法示例

下面，我将介绍两个示例，用于在Angular中使用JWT认证方法。

示例一：在服务端生成JWT Token

在服务端生成JWT Token的代码示例：

import * as jwt from 'jsonwebtoken';

const payload = {
  user: {
    id: 123,
    name: 'John Doe'
  }
};

const secret = 'my-secret-key';

const expiresIn = '1d'; // Token有效期

const token = jwt.sign(payload, secret, { expiresIn });

console.log(token); // 输出Token字符串

这段代码通过使用Jsonwebtoken库生成了一个包含用户信息的JWT Token，其中payload对象中存储了用户的身份信息，secret参数为JWT Token的签名密钥，expiresIn参数指定了Token的有效期。

示例二：在Angular中存储和发送JWT Token

在Angular中存储和发送JWT Token的代码示例：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ApiService {
  private readonly apiUrl = 'http://localhost:3000/api'; // API接口地址
  private readonly tokenStorageKey = 'auth_token'; // 存储Token的Storage Key名称
  private authToken: string;

  constructor(private http: HttpClient) {
    this.authToken = localStorage.getItem(this.tokenStorageKey);
  }

  getHeaders(): HttpHeaders {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: `Bearer ${this.authToken}`
    });

    return headers;
  }

  saveToken(token: string) {
    this.authToken = token;
    localStorage.setItem(this.tokenStorageKey, token);
  }

  clearToken() {
    this.authToken = null;
    localStorage.removeItem(this.tokenStorageKey);
  }

  login(username: string, password: string): Observable<any> {
    return this.http.post(`${this.apiUrl}/login`, { username, password }, { headers: this.getHeaders() });
  }
}

这段代码中，ApiService是一个Angular服务，它封装了与服务端API接口通信的逻辑。其中，saveToken方法用于保存从服务端获取的JWT Token，getHeaders方法用于生成HTTP请求的头部信息，Authorization用于携带JWT Token，login方法用于进行用户的登录操作，将用户名和密码发送到服务端验证。

在具体的业务逻辑中，我们可以在需要进行授权的HTTP请求中使用getHeaders方法。

以上就是在Angular中使用JWT认证方法的两个示例，通过在服务端生成JWT Token和在Angular中存储和发送JWT Token，我们可以实现Web应用的认证和授权功能。