Node.js 應用:Koa2 使用 JWT 進行鑒權

来源:https://www.cnblogs.com/linxin/archive/2018/08/17/9491342.html
-Advertisement-
Play Games

前言 在前後端分離的開發中,通過 Restful API 進行數據交互時,如果沒有對 API 進行保護,那麼別人就可以很容易地獲取並調用這些 API 進行操作。那麼伺服器端要如何進行鑒權呢? Json Web Token 簡稱為 JWT,它定義了一種用於簡潔、自包含的用於通信雙方之間以 JSON 對 ...


前言

在前後端分離的開發中,通過 Restful API 進行數據交互時,如果沒有對 API 進行保護,那麼別人就可以很容易地獲取並調用這些 API 進行操作。那麼伺服器端要如何進行鑒權呢?

Json Web Token 簡稱為 JWT,它定義了一種用於簡潔、自包含的用於通信雙方之間以 JSON 對象的形式安全傳遞信息的方法。JWT 可以使用 HMAC 演算法或者是 RSA 的公鑰密鑰對進行簽名。

說得好像跟真的一樣,那麼到底要怎麼進行認證呢?

jwt流程圖

首先用戶登錄時,輸入用戶名和密碼後請求伺服器登錄介面,伺服器驗證用戶名密碼正確後,生成token並返回給前端,前端存儲token,併在後面的請求中把token帶在請求頭中傳給伺服器,伺服器驗證token有效,返回正確數據。

既然伺服器端使用 Koa2 框架進行開發,除了要使用到 jsonwebtoken 庫之外,還要使用一個 koa-jwt 中間件,該中間件針對 Koa 對 jsonwebtoken 進行了封裝,使用起來更加方便。下麵就來看看是如何使用的。

生成token

這裡註冊了個 /login 的路由,用於用戶登錄時獲取token。

const router = require('koa-router')();
const jwt = require('jsonwebtoken');
const userModel = require('../models/userModel.js');

router.post('/login', async (ctx) => {
    const data = ctx.request.body;
    if(!data.name || !data.password){
        return ctx.body = {
            code: '000002',
            data: null,
            msg: '參數不合法'
        }
    }
    const result = await userModel.findOne({
        name: data.name,
        password: data.password
    })
    if(result !== null){
        const token = jwt.sign({
            name: result.name,
            _id: result._id
        }, 'my_token', { expiresIn: '2h' });
        return ctx.body = {
            code: '000001',
            data: token,
            msg: '登錄成功'
        }
    }else{
        return ctx.body = {
            code: '000002',
            data: null,
            msg: '用戶名或密碼錯誤'
        }
    }
});

module.exports = router;

在驗證了用戶名密碼正確之後,調用 jsonwebtoken 的 sign() 方法來生成token,接收三個參數,第一個是載荷,用於編碼後存儲在 token 中的數據,也是驗證 token 後可以拿到的數據;第二個是密鑰,自己定義的,驗證的時候也是要相同的密鑰才能解碼;第三個是options,可以設置 token 的過期時間。

獲取token

接下來就是前端獲取 token,這裡是在 vue.js 中使用 axios 進行請求,請求成功之後拿到 token 保存到 localStorage 中。這裡登錄成功後,還把當前時間存了起來,除了判斷 token 是否存在之外,還可以再簡單的判斷一下當前 token 是否過期,如果過期,則跳登錄頁面

submit(){
    axios.post('/login', {
        name: this.username,
        password: this.password
    }).then(res => {
        if(res.code === '000001'){
            localStorage.setItem('token', res.data);
            localStorage.setItem('token_exp', new Date().getTime());
            this.$router.push('/');
        }else{
            alert(res.msg);
        }
    })
}

然後請求伺服器端API的時候,把 token 帶在請求頭中傳給伺服器進行驗證。每次請求都要獲取 localStorage 中的 token,這樣很麻煩,這裡使用了 axios 的請求攔截器,對每次請求都進行了取 token 放到 headers 中的操作。

axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    config.headers.common['Authorization'] = 'Bearer ' + token;
    return config;
})

驗證token

通過 koa-jwt 中間件來進行驗證,用法也非常簡單

const koa = require('koa');
const koajwt = require('koa-jwt');
const app = new koa();

// 錯誤處理
app.use((ctx, next) => {
    return next().catch((err) => {
        if(err.status === 401){
            ctx.status = 401;
            ctx.body = 'Protected resource, use Authorization header to get access\n';
        }else{
            throw err;
        }
    })
})

app.use(koajwt({
    secret: 'my_token'
}).unless({
    path: [/\/user\/login/]
}));

通過 app.use 來調用該中間件,並傳入密鑰 {secret: 'my_token'},unless 可以指定哪些 URL 不需要進行 token 驗證。token 驗證失敗的時候會拋出401錯誤,因此需要添加錯誤處理,而且要放在 app.use(koajwt()) 之前,否則不執行。

如果請求時沒有token或者token過期,則會返回401。

解析koa-jwt

我們上面使用 jsonwebtoken 的 sign() 方法來生成 token 的,那麼 koa-jwt 做了些什麼幫我們來驗證 token。

resolvers/auth-header.js

module.exports = function resolveAuthorizationHeader(ctx, opts) {
    if (!ctx.header || !ctx.header.authorization) {
        return;
    }
    const parts = ctx.header.authorization.split(' ');
    if (parts.length === 2) {
        const scheme = parts[0];
        const credentials = parts[1];
        if (/^Bearer$/i.test(scheme)) {
            return credentials;
        }
    }
    if (!opts.passthrough) {
        ctx.throw(401, 'Bad Authorization header format. Format is "Authorization: Bearer <token>"');
    }
};

在 auth-header.js 中,判斷請求頭中是否帶了 authorization,如果有,將 token 從 authorization 中分離出來。如果沒有 authorization,則代表了客戶端沒有傳 token 到伺服器,這時候就拋出 401 錯誤狀態。

verify.js

const jwt = require('jsonwebtoken');

module.exports = (...args) => {
    return new Promise((resolve, reject) => {
        jwt.verify(...args, (error, decoded) => {
            error ? reject(error) : resolve(decoded);
        });
    });
};

在 verify.js 中,使用 jsonwebtoken 提供的 verify() 方法進行驗證返回結果。jsonwebtoken 的 sign() 方法來生成 token 的,而 verify() 方法則是用來認證和解析 token。如果 token 無效,則會在此方法被驗證出來。

index.js

const decodedToken = await verify(token, secret, opts);
if (isRevoked) {
    const tokenRevoked = await isRevoked(ctx, decodedToken, token);
    if (tokenRevoked) {
        throw new Error('Token revoked');
    }
}
ctx.state[key] = decodedToken;  // 這裡的key = 'user'
if (tokenKey) {
    ctx.state[tokenKey] = token;
}

在 index.js 中,調用 verify.js 的方法進行驗證並解析 token,拿到上面進行 sign() 的數據 {name: result.name, _id: result._id},並賦值給 ctx.state.user,在控制器中便可以直接通過 ctx.state.user 拿到 name_id

安全性

  • 如果 JWT 的加密密鑰泄露的話,那麼就可以通過密鑰生成 token,隨意的請求 API 了。因此密鑰絕對不能存在前端代碼中,不然很容易就能被找到。
  • 在 HTTP 請求中,token 放在 header 中,中間者很容易可以通過抓包工具抓取到 header 里的數據。而 HTTPS 即使能被抓包,但是它是加密傳輸的,所以也拿不到 token,就會相對安全了。

總結

這上面就是 jwt 基本的流程,這或許不是最完美的,但在大多數登錄中使用已經足夠了。
上面的代碼可能不夠具體,這裡使用 Koa + mongoose + vue.js 實現的一個例子 : jwt-demo,可以做為參考。

更多文章:lin-xin/blog


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

-Advertisement-
Play Games
更多相關文章
  • 自開發跟自編譯意思一樣,後者表示一個開發語言的開發能力成熟度;前者則表示一個開發平臺的開發能力成熟度。 iPhone跟iPad面世這麼多年,一直無法擺脫“娛樂”工具的宿命。Apple曾經希望通過iPad Pro為平臺增添“生產力工具”的特征,但看起來成效不大。 而競爭對手的Surface Pro,雖 ...
  • 實例 相關閱讀 瞭解SurfaceView ...
  • 如標題,這是一個在列表多類型視圖時的一個簡化封裝方法,減少多餘代碼,提高復用性,更好迭代擴展,先看視圖列表效果圖 GitHub:https://github.com/1024477951/FragmentApp 咋一看感覺就是一個普通的列表,但是要講的也不是效果,可以看到一般im列表頁類型畢竟多,代 ...
  • 在命令行運行 adb connect 192.168.10.* 時出現如上錯誤 解決辦法: 1、強制結束adb.exe的進程 2、使用adb start-server 重啟adb驅動,啟動成功後重新連接android設備 ...
  • Knowledge Reserve ComputerOperatingSystem 1. "編譯" 2. "靜態庫&動態庫(Linux)" .md) 3. "靜態鏈接&動態鏈接" 4. "記憶體" 5. "內聯函數&巨集" 6. "Static&Const" 7. "死鎖" 8. "線程安全" 9. " ...
  • repo是遠程訪問android源碼的工具,和git一起使用。 repo的遠程安裝經常被屏蔽,你懂得。 sudo apt-get install curl 244 sudo apt-get -f install curl 245 curl https://dl-ssl.google.com/dl/g ...
  • 自定義SurfaceView 主要步驟: 實現SurfaceHolder.Callback介面,創建SurfaceView的生命周期 實現Camera.PreviewCallback介面,創建預覽回調介面 創建Camera打開相機 實例: FrameCallback回調介面 MainActivity ...
  • 1、我們要明白當js操作dom時發生了什麼? 每次對dom的操作都會觸發"重排"(重新渲染界面,發生重繪或迴流),這嚴重影響到能耗,一般通常採取的做法是儘可能的減少 dom操作來減少"重排" 2、什麼是文檔碎片? document.createDocumentFragment() 一個容器,用於暫時 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...