在Angular中使用JWT認證方法示例

更新時間：2018年09月10日 11:10:57 作者：湯誠

這篇文章主要介紹了在Angular中使用JWT認證方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了在Angular中使用JWT認證方法示例，分享給大家，具體如下：

基于session的認證和基于token的認證的方式已經(jīng)被廣泛使用。在session認證中，服務端會存儲一份用戶登錄信息，這份登錄信息會在響應時傳遞給瀏覽器并保存為Cookie，在下次請求時，會帶上這份登錄信息，這樣就能識別請求來自哪個用戶。

在基于session的認證中，每個用戶都要生成一份session，這份session通常保存在內(nèi)存中，隨著用戶量的增加，服務端的開銷會增大，而且對分布式應用不是很友好。

在token認證中，服務端不需要保留用戶認證信息。當用戶登錄時，服務器驗證用戶信息后會返回一個token，這個token存儲在客戶端，并且在每次請求的請求頭中都帶上這個token，這樣服務端驗證token后就可以返回數(shù)據(jù)。

JWT（JSON Web Token）是一個開放標準（RFC 7519），它定義了一種緊湊且獨立的方式，可以在各方之間作為JSON對象安全地傳輸信息。此信息可以通過數(shù)字簽名進行驗證和信任。特別適用于分布式站點的單點登錄（SSO）場景。

JWT 是什么，為何要使用 JWT？

JWT 是 JSON Web Tokens 的簡稱，對于這個問題最精簡的回答是，JWT 具有簡便、緊湊、安全的特點，具體來看：

簡便：只要用戶登陸后，使用 JWT 認證僅需要添加一個 http header 認證信息，這可以用一個函數(shù)簡單實現(xiàn)，我們會在后面的例子中看到這一點。

緊湊：JWT token 是一個 base 64 編碼的字符串，包含若干頭部信息及一些必要的數(shù)據(jù)，非常簡單。簽名后的 JWT 字符串通常不超過 200 字節(jié)。

安全：JWT 可以使用 RSA 或 HMAC 加密算法進行加密，確保 token 有效且防止篡改。

總之你可以有一種安全有效的方式來認證用戶，并且對所有 api 調(diào)用都進行認證，而不需要解析復雜的數(shù)據(jù)結(jié)構(gòu)或者實現(xiàn)自己的加密算法。

JWT的構(gòu)成

JWT由 . 分隔的三個部分組成，它們是：

頭部（Header）
荷載（Playload）
簽名（Signature）

也就是說，JWT只是一個具有以下格式的字符串：

header.payload.signature

頭部

頭部通常由兩部分組成：令牌的類型（即JWT）以及正在使用的散列算法，例如HMAC SHA256或RSA。

header.payload.signature

然后，對這個JSON進行Base64編碼，形成JWT的第一部分。

ewogICJhbGciOiAiSFMyNTYiLAogICJ0eXAiOiAiSldUIgp9

荷載

JWT的第二部分是荷載，其中包含聲明。聲明是關于實體（通常是用戶）和其他數(shù)據(jù)的聲明。聲明有三種：注冊的聲明、公開的聲明和私有的聲明。

JWT規(guī)范定義了七個在標準中注冊的聲明名稱，它們是：

iss： JWT簽發(fā)者
sub： JWT所面向的用戶
aud：接收JWT的一方
exp：JWT的過期時間，這個過期時間必須要大于簽發(fā)時間
nbf：定義在什么時間之前，該JWT都是不可用的.
iat： JWT的簽發(fā)時間
jti： JWT的唯一身份標識，主要用來作為一次性token,從而回避重放攻擊。

對于特定情況，可以使用公共的聲明名稱。這些包括：

auth_time：身份驗證發(fā)生的時間
acr：認證上下文類的引用
nonce：用于將客戶端會話與ID Token關聯(lián)的值

最后，還有私有的聲明名稱，可以使用它們來傳達與身份相關的信息，例如姓名或部門。

由于公共和私人的聲明未注冊，請注意避免名稱沖突。

比如，我們定義一個palyload:

{
 "sub": "1234567890",
 "name": "tc9011",
 "admin": true,
 "exp": 1441594722
}

然后將其進行base64加密，得到JWT的第二部分:

ewogICJzdWIiOiAiMTIzNDU2Nzg5MCIsCiAgIm5hbWUiOiAidGM5MDExIiwKICAiYWRtaW4iOiB0cnVlLAogICJleHAiOiAxNDQxNTk0NzIyCn0=

簽名

簽名由base64編碼后的頭、base64編碼后的荷載和secret組成。

例如，將上面的兩個編碼后的字符串都用句號 . 連接在一起（頭部在前），就形成了：

ewogICJhbGciOiAiSFMyNTYiLAogICJ0eXAiOiAiSldUIgp9.ewogICJzdWIiOiAiMTIzNDU2Nzg5MCIsCiAgIm5hbWUiOiAidGM5MDExIiwKICAiYWRtaW4iOiB0cnVlLAogICJleHAiOiAxNDQxNTk0NzIyCn0=

然后，將上面拼接完的字符串用secret作為秘鑰進行HS256加密。

HMACSHA256(
 base64UrlEncode(header) + "." +
 base64UrlEncode(payload),
 secret)

使用JWT

一般在會在請求頭中加入 Authorization ，并加上 Bearer 進行標注：

fetch('api/v1/user/1', {
 headers: {
  'Authorization': 'Bearer ' + token
 }
})

服務端會驗證token，如果驗證通過就會返回相應的資源。

不過要注意，因為荷載是base64編碼，這種編碼可以對稱解密，所以在荷載中不應該存放用戶的敏感信息，比如密碼。所以一般JWT用來向Web傳遞一些非敏感信息，例如用戶名、所屬部門等。

在Angular中使用JWT

這里我們以Angular6和koa2（使用TypeScript）為例，介紹一下如何在你的Angular應用中使用JWT。

服務端

首先在jwt.io 官網(wǎng)上找到node的JWT的庫： jsonwebtoken 。

可以看到官網(wǎng)把這個庫對標準注冊聲明字段的支持情況以及加密方式的支持情況都列出來了。除了這個庫，還需要使用koa一個中間件： koa-jwt ，用來對HTTP請求進行JWT認證。你可以通過下面命令安裝這兩個庫：

npm i koa-jwt jsonwebtoken --save

在 app.ts 中：

import * as jwt from 'koa-jwt';

app.use(jwt({
   secret: Secret
  }).unless({
   path: [/\/register/, /\/login/, /\/groups/],
  }));

這里的secret就是你自己定義的秘鑰， unless 方法用來排除一些不需要進行JWT認證的api。koa-jwt中間件需要放在路由中間件之前，這樣就可以對所有路由（除了 unless 中設置的路由外）進行JWT的檢查。只有正確之后才能正確的訪問。

除此之外，你還要自定義一個401錯誤處理的中間件，如果沒有token，或者token失效，該中間件會給出對應的錯誤信息。如果沒有自定義中間件的話，會直接將 koa-jwt 暴露的錯誤信息直接返回給用戶。

export const errorHandle = (ctx, next) => {
 return next().catch((err) => {
  if (err.status === 401) {
   ctx.status = 401;
   handleError({ctx, message: '登錄過期，請重新登錄', err: err.originalError ? err.originalError.message : err.message});
  } else {
   throw err;
  }
 });
};

然后把這個中間件放在koa-jwt之前：

app.use(errorHandle);

app.use(jwt({
  secret: Secret
}).unless({
  path: [/\/register/, /\/login/, /\/groups/],
}));

在用戶登陸時候，生成token，返回給客戶端：

// 生成 token 返回給客戶端
const token = jsonwebtoken.sign({
  user: {
    workNumber: user.workNumber,
    realName: user.realName,
    group: user.group,
    role: user.role
  },

  // 設置 token 過期時間
  exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24),  // 1天
}, Secret);

handleSuccess({
  ctx,
  message: '登陸成功!',
  response: {
    token,
    lifeTime: Math.floor(Date.now() / 1000) + (60 * 60 * 24)  // 1天
  }
});

需要注意的是，在使用 jsonwebtoken.sign() 時，需要傳入的 secret 參數(shù)，這里的 secret 必須要與前面設置 jwt() 中的 secret 一致。

客戶端

在Angular中，我們需要使用 @auth0/angular2-jwt 這個庫來幫助我們在Angular中處理JWT:

npm install @auth0/angular-jwt --save

在 app.module.ts 中引入 JwtModule 這個模塊（注意，引入該模塊的同時也要引入 HttpClientModule 模塊）：

import { JwtModule } from '@auth0/angular-jwt';
import { HttpClientModule } from '@angular/common/http';

export function tokenGetter(){
 return localStorage.getItem('token');
}

@NgModule({
 bootstrap: [AppComponent],
 imports: [
  // ...
  HttpClientModule,
  JwtModule.forRoot({
   config: {
    tokenGetter: tokenGetter,
    whitelistedDomains: ['localhost:3001'],
    blacklistedRoutes: ['localhost:3001/auth/']
   }
  })
 ]
})
export class AppModule {}

在 JwtModule 的 config 中：

tokenGetter ：從localStorage中獲取token；

whitelistedDomains ：允許發(fā)送認證的請求的域名；

blacklistedRoutes ：你不希望替換header中 Authorization 信息的api列表。

接著創(chuàng)建一個全局的 auth.service.ts 服務，方便在登陸的時候獲取用戶相關信息及權限，這個服務中有個 login 方法，用來處理登陸后返回的token信息，并把token存到LocalStorage中，這樣在token失效前，下次用戶登陸時就不需要輸入用戶名和密碼：

login(loginInfo: LoginInfo): Observable<boolean> {
  return this.passportService.postLogin(loginInfo).pipe(map(
    (res: LoginRes) => {
      // 登陸成功后獲取token，并存到localStorage
      this.storageService.setLocalStorage('token', res.token);
      const decodedUser = this.decodeUserFromToken(res.token);
      this.setCurrentUser(decodedUser);
      this.msg.success('登錄成功!');
      return this.loggedIn;
    }
  )
                             );
}

在這個 login 方法中， decodeUserFromToken 封裝了 @auth0/angular2-jwt 中提供的 decodeToken 方法，注意 decodeToken 方法解析出來的只是服務端 jsonwebtoken.sign() 中的JSON對象，所以需要通過 . 操作獲取 jsonwebtoken.sign() 中定義的 user ：

decodeUserFromToken(token): User {
  return this.jwtHelperService.decodeToken(token).user;
}

在這個服務中，定義了兩個變量 loggedIn 和 isAdmin ，用來標識用戶是否登錄和其相應的權限，方便在Angular路由中控制可以訪問的視圖。

有登錄當然就有登出，登出時只需把token從LocalStorage中移除，并把幾個變量重置即可：

logout(): void {
  this.storageService.removeLocalStorage('token');
  this.loggedIn = false;
  this.isAdmin = false;
  this.currentUser = new User();
}

AuthService 的完整代碼如下：

import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

import { JwtHelperService } from '@auth0/angular-jwt';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { LoginInfo, LoginRes, User } from '../../views/passport/interfaces/passport';
import { PassportService } from '../../views/passport/services/passport.service';
import { StorageService } from '../storage/storage.service';
import { NzMessageService } from 'ng-zorro-antd';


@Injectable()
export class AuthService {
 public loggedIn = false;
 public isAdmin = false;
 public currentUser: User = new User();

 constructor(private jwtHelperService: JwtHelperService,
       private router: Router,
       private injector: Injector,
       private passportService: PassportService,
       private storageService: StorageService) {
  const token = localStorage.getItem('token');
  if (token) {
   const decodedUser = this.decodeUserFromToken(token);
   this.setCurrentUser(decodedUser);
  }
 }

 get msg(): NzMessageService {
  return this.injector.get(NzMessageService);
 }

 login(loginInfo: LoginInfo): Observable<boolean> {
  return this.passportService.postLogin(loginInfo).pipe(map(
   (res: LoginRes) => {
     this.storageService.setLocalStorage('token', res.token);
     const decodedUser = this.decodeUserFromToken(res.token);
     this.setCurrentUser(decodedUser);
     this.msg.success('登錄成功!');
     return this.loggedIn;
    }
   )
  );
 }

 logout(): void {
  this.storageService.removeLocalStorage('token');
  this.loggedIn = false;
  this.isAdmin = false;
  this.currentUser = new User();
 }

 decodeUserFromToken(token): User {
  return this.jwtHelperService.decodeToken(token).user;
 }

 setCurrentUser(decodedUser): void {
  this.loggedIn = true;
  this.currentUser.workNumber = decodedUser.workNumber;
  this.currentUser.realName = decodedUser.realName;
  this.currentUser.group = decodedUser.group;
  this.currentUser.role = decodedUser.role;
  this.isAdmin = decodedUser.role > 10;
  delete decodedUser.role;
 }
}

至此，在你的Angular應用中就引入了JWT認證，當然，你也可以不使用 @auth0/angular2-jwt ，自己手寫一個HTTP攔截器，手動設置每次請求的header：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>,
       next: HttpHandler): Observable<HttpEvent<any>> {

    const token = localStorage.getItem("token");

    if (token) {
      const cloned = req.clone({
        headers: req.headers.set("Authorization",
          "Bearer " + token)
      });

      return next.handle(cloned);
    }
    else {
      return next.handle(req);
    }
  }
}

不過這樣的話，token Base64解碼也需要自己手寫，稍微麻煩一點。

總結(jié)

JWT因為是基于JSON的，所以通用性很強，很多語言已經(jīng)存在jwt相關的庫。不過使用JWT的時候需要注意以下幾點：

保存好secret秘鑰，這個秘鑰只能在服務端存在
給token設置一個過期時間，因為一旦token生成，它就永遠有效，除非token密鑰被更改或過期
在payload中只能存儲一些業(yè)務邏輯所必要的非敏感信息

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

div實現(xiàn)自適應高度的textarea實現(xiàn)angular雙向綁定
本文主要介紹了div實現(xiàn)自適應高度的textarea，實現(xiàn)angular雙向綁定的方法。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
Angular 向組件傳遞模板的兩種方法
這篇文章主要介紹了Angular 向組件傳遞模板的兩種方法,第一種方式<ng-content>第二種方式是NgTemplateOutlet 指令及各種使用方式介紹,需要的朋友可以參考下
2018-02-02
Angular2中如何使用ngx-translate進行國際化
本篇文章主要介紹了Angular2中使用ngx-translate進行國際化，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
AngularJS點擊添加樣式、點擊變色設置的實例代碼
本篇文章主要介紹了AngularJS點擊添加樣式、點擊變色設置的實例代碼，具有一定的參考價值，有興趣的可以了解一下
2017-07-07
Angular.js與node.js項目里用cookie校驗賬戶登錄詳解
這篇文章主要介紹了Angular.js與node.js項目里用cookie校驗賬戶登錄的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
angular1配合gulp和bower的使用教程
這篇文章主要介紹了angular1配合gulp和bower使用教程，本文給大家介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下
2018-01-01
詳解angularjs 關于ui-router分層使用
本篇文章主要介紹了詳解angularjs 關于ui-router分層使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Angularjs 自定義服務的三種方式(推薦)
angularjs 中可通過三種（$provider,$factory,$service）方式自定義服務。這篇文章主要介紹了Angularjs 自定義服務的三種方式,非常不錯，需要的朋友可以參考下
2016-08-08
AngularJS實現(xiàn)與Java Web服務器交互操作示例【附demo源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)與Java Web服務器交互操作的方法,結(jié)合實例形式較為詳細的分析了AngularJS前臺ajax提交與javascript后臺處理的完整流程與實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-11-11
AngularJS實現(xiàn)使用路由切換視圖的方法
這篇文章主要介紹了AngularJS實現(xiàn)使用路由切換視圖的方法,結(jié)合學生信息管理系統(tǒng)為例分析了使用controllers.js控制器來切換視圖的具體步驟與相關操作技巧,需要的朋友可以參考下
2017-01-01