Angular之jwt令牌身份验证的实现

下面是“Angular之jwt令牌身份验证的实现”的完整攻略：

什么是JWT令牌

JSON Web Token（JWT）是一种轻量级的安全性访问令牌，主要用于在网络应用中传递被授权的信息。JWT由三部分组成，分别是头部、载荷和签名。

• 头部: 通常由两部分组成，类型和加密算法。
• 载荷: 所要传递的信息。
• 签名: 保证信息没有被篡改过。

在服务器端口生成令牌，将其发放给“客户端”，之后该“客户端”每次请求时，可以将该令牌放在请求头中一并发送给服务器端，服务器端通过与令牌签名比较，来验证访问权限。

JWT令牌的优势

与传统的Session/Cookie认证方式不同的是，JWT令牌方案具有以下优势：

• 自包含性：其本身携带了身份信息，服务端无需存储用户信息。
• 扩展性：可添加任意数量的自定义字段。
• 安全性：令牌编码由保密密钥（例如密码学）保护，因此无法篡改。

Angular中使用JWT令牌身份验证的实现

在Angular中使用JWT令牌身份验证，需要在服务端颁发JWT令牌，然后在客户端存储该令牌。每次向API发送请求时，这个令牌都将作为头信息 Authorization 在API中提出。过程如下：

• 颁发JWT令牌
• 在客户端存储JWT令牌
• 向API发送请求，为HTTP头部添加JWT令牌

1. 颁发JWT令牌

在服务端口颁发JWT令牌可以采用如下的方式：

const jwt = require('jsonwebtoken');
const userModel = require('../models/user.model');

const secretKey = 'ThisIsSecretKey';

function validateUser(user) {
    return (user.username === 'admin' && user.password === 'admin');
}

exports.login = function (req, res) {
    // 从请求中获取传递的用户名和密码
    const { username, password } = req.body;

    // 验证用户身份
    const user = { username, password };
    if (validateUser(user)) {
        // 创建并颁发JWT令牌
        const token = jwt.sign({ username: user.username }, secretKey, { expiresIn: '1h' });

        // 以JSON格式向客户端发送响应
        res.json({
            message: 'Login successful',
            token
        });
    } else {
        // 发送身份验证失败信息
        res.status(401).json({
            message: 'Unauthorized'
        });
    }
};

2. 在客户端存储JWT令牌

在Angular应用程序中，可以使用LocalStorage或sessionStorage存储JWT令牌。通过LocalStorage在客户端中存储JWT令牌的示例代码如下：

import { Injectable } from '@angular/core';

const TOKEN_KEY = 'AuthToken';

@Injectable({
  providedIn: 'root'
})
export class TokenStorageService {

  constructor() { }

  signOut(): void {
    window.localStorage.removeItem(TOKEN_KEY);
  }

  public saveToken(token: string): void {
    window.localStorage.removeItem(TOKEN_KEY);
    window.localStorage.setItem(TOKEN_KEY, token);
  }

  public getToken(): string {
    return localStorage.getItem(TOKEN_KEY);
  }
}

3. 向API发送请求，为HTTP头部添加JWT令牌

在Angular应用程序中，可以创建一个AuthInterceptor用于在向API发送请求时，在HTTP头部添加JWT令牌。代码如下：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { TokenStorageService } from './token-storage.service';

const TOKEN_HEADER_KEY = 'Authorization';

@Injectable({
  providedIn: 'root'
})
export class AuthInterceptor implements HttpInterceptor {

  constructor(private token: TokenStorageService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    let authReq = req;
    const token = this.token.getToken();
    if (token != null) {
      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });
    }
    return next.handle(authReq);
  }
}

最后，在Angular模块中添加AuthInterceptor服务以确保HTTP请求成功携带JWT令牌。代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';

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

以上即是“Angular之jwt令牌身份验证的实现”的完整攻略，希望能给您带来一些帮助。