Koa - 中間件（理解中間件、實現一個驗證token中間件）

来源:https://www.cnblogs.com/chanwahfung/archive/2019/08/31/11427205.html
-Advertisement-
Play Games

前言 Koa 應用程式是一個包含一組中間件函數的對象，它是按照類似堆棧的方式組織和執行的。 當一個中間件調用 next() 則該函數暫停並將控制傳遞給定義的下一個中間件。當在下游沒有更多的中間件執行後，堆棧將展開並且每個中間件恢復執行其上游行為。 以上兩句話，是我在官方文檔中找到其對 Koa 中間件 ...


前言

Koa 應用程式是一個包含一組中間件函數的對象，它是按照類似堆棧的方式組織和執行的。

當一個中間件調用 next() 則該函數暫停並將控制傳遞給定義的下一個中間件。當在下游沒有更多的中間件執行後，堆棧將展開並且每個中間件恢復執行其上游行為。

以上兩句話，是我在官方文檔中找到其對 Koa 中間件的描述。

在Koa中，中間件是一個很有意思的設計，它處於request和response中間，被用來實現某種功能。像上篇文章所使用的 koa-router 、koa-bodyparser 等都是中間件。

可能有些人喜歡把中間件理解為插件，但我覺得它們兩者並不是同一種概念的東西。插件像是一個獨立的工具，而中間件更像是流水線，將加工好的材料繼續傳遞下一個流水線。所以中間件給我的感覺更靈活，可以像零件一樣自由組合。

單看中間件有堆棧執行順序的特點，兩者就出現質的區別。

中間件的概念

這張圖是 Koa 中間件執行順序的圖示，被稱為“洋蔥模型”。

中間件按照棧結構的方式來執行，有“先進後出“的特點。

 

一段簡單的代碼來理解上圖：

app.use(async (ctx, next)=
   console.log('--> 1')
   next()
   console.log('<-- 1')
})

app.use(async (ctx, next)=>{
   console.log('--> 2')
   //這裡有一段非同步操作
   await  new Promise((resolve)=>{
       ....
   })
   await  next()
   console.log('<-- 2')
})

app.use(async (ctx, next)=>{
   console.log('--> 3')
   next()
   console.log('<-- 3')
})  
app.use(async (ctx, next)=>{
   console.log('--> 4')
})

當我們運行這段代碼時，得到以下結果

--> 1

--> 2

--> 3

--> 4

<-- 3

<-- 2

<-- 1

 

 中間件通過調用 next 一層層執行下去，直到沒有執行權可以繼續傳遞後，在以冒泡的形式原路返回，並執行 next 函數之後的行為。可以看到 1 第一個進去，卻是最後一個出來，也體現出中間件棧執行順序的特點。

在第二個中間件有一段非同步操作，所以要加上await，讓執行順序按照預期去進行，否則可能會出現一些小問題。

 

中間件的使用方式

1.應用中間件

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();
app.use(async (ctx,next)=>{
    console.log(new Date());
    await next();
})
router.get('/', function (ctx, next) {
    ctx.body="Hello koa";
})
router.get('/news',(ctx,next)=>{
    ctx.body="新聞頁面"
});
app.use(router.routes()); //作用：啟動路由
app.use(router.allowedMethods()); //作用： 當請求出錯時的處理邏輯
app.listen(3000,()=>{
    console.log('starting at port 3000');
});

 

2.路由中間件

router.get('/', async(ctx, next)=>{
    console.log(1)
    next()
})
router.get('/', function (ctx) {
    ctx.body="Hello koa";
})

 

3.錯誤處理中間件

app.use(async (ctx,next)=> {
    next();
    if(ctx.status==404){
        ctx.status = 404;
        ctx.body="這是一個404頁面"
    }
});

 

4.第三方中間件

const bodyParser = require('koa-bodyparser');
app.use(bodyParser());

 

實現驗證token中間件

實現一個基於 jsonwebtoken 驗證token的中間件，這個中間件由兩個文件組成 extractors.js 、index.js，並放到check-jwt文件夾下。

生成token

const Router = require('koa-router')
const route = new Router()
const jwt = require('jsonwebtoken')

route.get('/getToken', async (ctx)=>{
    let {name,id} = ctx.query
    if(!name && !id){
        ctx.body = {
            msg:'不合法',
            code:0
        }
        return
    }
    //生成token
    let token = jwt.sign({name,id},'secret',{ expiresIn: '1h' })
    ctx.body = {
        token: token,
        code:1
    }
})

module.exports = route

使用 jwt.sign 生成token：

第一個參數為token中攜帶的信息；

第二個參數為key標識（解密時需要傳入該標識）；

第三個為可選配置選項，這裡我設置過期時間為一小時；

詳細用法可以到npm上查看。

 

使用中間件

app.js:

const {checkJwt,extractors} = require('./check-jwt')

app.use(checkJwt({
  jwtFromRequest: extractors.fromBodyField('token'),
　secretOrKeyL: 'secret',
  safetyRoutes: ['/user/getToken']
}))
  是否必選 接收類型 備註
jwtFromRequest 否 函數 預設驗證 header 的 authorization extractors提供的提取函數，支持get、post、header方式提取 這些函數都接收一個字元串參數（需要提取的key） 對應函數： fromUrlQueryParameter、 fromBodyField、 fromHeader  
secretOrKey 是 字元串 與生成token時傳入的標識保持一致
safetyRoutes 否 數組 不需要驗證的路由

 

                   

 

使用該中間件後，會對每個路由都進行驗證

 

路由中獲取token解密的信息

route.get('/getUser', async ctx=>{
    let {name, id} = ctx.payload 
    ctx.body = {
        id,
        name,
        code:1
    }
})

通過ctx.payload來獲取解密的信息

 

實現代碼

extractors.js 工具函數（用於提取token）

let extractors = {}

extractors.fromHeader = function(header_name='authorization'){
    return function(ctx){
        let token   = null,
            request = ctx.request;
        if (request.header[header_name]) {
            token = header_name === 'authorization' ? 
            request.header[header_name].replace('Bearer ', '') :
            request.header[header_name];
        }else{
            ctx.body = {
                msg: `${header_name} 不合法`,
                code: 0
            }
        }
        return token;
    }
}

extractors.fromUrlQueryParameter = function(param_name){
    return function(ctx){
        let token   = null,
            request = ctx.request;
        if (request.query[param_name] && Object.prototype.hasOwnProperty.call(request.query, param_name)) {
            token = request.query[param_name];
        }else{
            ctx.body = {
                msg: `${param_name} 不合法`,
                code: 0
            }
        }
        return token;
    }
}

extractors.fromBodyField = function(field_name){
    return function(ctx){
        let token   = null,
            request = ctx.request;
        if (request.body[field_name] && Object.prototype.hasOwnProperty.call(request.body, field_name)) {
            token = request.body[field_name];
        }else{
            ctx.body = {
                msg: `${field_name} 不合法`,
                code: 0
            }
        }
        return token;
    }
}

module.exports = extractors

index.js  驗證token

const jwt = require('jsonwebtoken')
const extractors = require('./extractors')

/**
 * 
 * @param {object} options 
 *    @param {function} jwtFromRequest
 *    @param {array} safetyRoutes
 *    @param {string} secretOrKey 
 */

function checkJwt({jwtFromRequest,safetyRoutes,secretOrKey}={}){
    return async function(ctx,next){
        if(typeof safetyRoutes !== 'undefined'){
            let url = ctx.request.url
            //對安全的路由 不驗證token
            if(Array.isArray(safetyRoutes)){
                for (let i = 0, len = safetyRoutes.length; i < len; i++) {
                    let route = safetyRoutes[i],
                        reg = new RegExp(`^${route}`);
   
                    //若匹配到當前路由 則直接跳過  不開啟驗證                
                    if(reg.test(url)){
                        return await next()
                    }
                }
            }else{
                throw new TypeError('safetyRoute 接收類型為數組')
            }
        }
        if(typeof secretOrKey === 'undefined'){
            throw new Error('secretOrKey 為空')
        }
        if(typeof jwtFromRequest === 'undefined'){
            jwtFromRequest = extractors.fromHeader()
        }
        let token = jwtFromRequest(ctx)
        if(token){
            //token驗證
            let err = await new Promise(resolve=>{
                jwt.verify(token, secretOrKey,function(err,payload){
                    if(!err){
                        //將token解碼後的內容 添加到上下文
                        ctx.payload = payload
                    }
                    resolve(err)
                })
            })
            if(err){
                ctx.body = {
                    msg: err.message === 'jwt expired' ? 'token 過期' : 'token 出錯',
                    err,
                    code:0
                }
                return
            }
            await next()
        }
    }
}

module.exports = {
    checkJwt,
    extractors
}

 Demo： https://gitee.com/ChanWahFung/koa-demo

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javaWeb核心技術第十四篇之easyui
    網站是分為網站的前臺和網站的後臺. 前臺--給用戶看的 例如:商城 後臺--給管理員看的 例如:商城後臺 目的:用來添加維護數據 BootStrap:jsp 頁面顯示,效果好,美觀,適合作為用戶界面. EasyUI : jsp頁面,快速開發,格式統一,美觀效果一般. EasyUI裡面有很多組件(功能... ...
  • Vue基礎彙總
    一. "Vue的介紹及安裝和導入" 二. "Vue的使用" 三. "Vue成員獲取" 四. "Vue中的迴圈以及修改差值表達式" 五. "vue中methods,computed，filters,watch的總結" 六. "Vue中組件" 七. "Vue中插槽指令" 八. "Vue部分編譯不生效,解 ...
  • Vue-CLI項目路由案例彙總
    0901自我總結 Vue CLI項目路由案例彙總 router.js components/Nav.vue views/Course.vue components/CourseCard.vue vue <! 邏輯跳轉 {{ card.title }} <! 鏈接跳轉 <! 第一種 <! <route ...
  • 轉載 | 身份互聯網(IoI)即將到來，IAM將發生巨變！
    身份互聯網和物聯網之間有什麼區別？ 顧名思義，物聯網是關於物的——設備、控制器、致動器等等。但這些東西會執行任務、收集數據、連接到其他設備。換句話說， 每個設備都會有帶多重屬性的一個身份，而這些屬性必須得到良好的理解，才可以驅動好事發生，而阻止壞事降臨。 因此， 身份互聯網IOI (Internet ...
  • CSS學習筆記二
    盒子模型：（重點） 盒子模型（CSS框模型）規定了元素框處理元素內容、內邊距、邊框、外邊框等樣式 記住上面這一張圖！一定要記住！一定！一定！ 內邊距、邊框和外邊距是可選參數屬性，預設值：0 ；很多元素由用戶代理樣式表設置外邊距和邊框，通過將元素的 margin外邊距和padding內邊距設置為 0 ...
  • 01 - jQuery介紹和體驗
    jQuery介紹 在說jQuery之前，先說一個概念吧，什麼是JavaScript框架庫，其實就是一個普通的js文件，裡面封裝了很多函數或者說封裝了很多相容的代碼；當然啦，jQuery就是眾多庫的一員，那麼我們為什麼要學習jQuery呢，那就講一下他的特點； 1. 很好的解決了不同瀏覽器之間的相容性 ...
  • 【React實踐總結】Form表單即時校驗輸入值（基於Antd Design）
    1.判斷輸入值的長度 1.1 根據輸入值的類型不同，限制輸入值長度不同 此時需要使用自定義的校驗規則。 如長度要求：中文輸入5位，非中文10位 1 <FormItem label="名稱" {...formItemLayout}> 2 {getFieldDecorator('name', { 3 r ...
  • Node.js安裝詳細步驟教程(Windows版)
    Node.js是一個基於 Chrome V8 引擎的 JavaScript 運行環境；Node.js使用一個事件驅動、非阻塞式 I/O 的模型，使其輕量且高效；Node.js的軟體包生態系統npm是全球最大的開源庫生態系統。本文詳細介紹了Node.js的安裝、配置及測試教程，希望對您有所幫助。 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類