用戶身份驗證通常有兩種方式,一種是基於cookie的認證方式,另一種是基於token的認證方式。當前常見的無疑是基於token的認證方式。以下所提到的koa均為koa2版本。
token認證的優點是無狀態機制,在此基礎之上,可以實現天然的跨域和前后端分離等。
token認證的缺點是服務器每次都需要對其進行驗證,會產生額外的運行壓力。此外,無狀態的api缺乏對用戶流程或異常的控制,為了避免一些例如回放攻擊的異常情況,大多會設置較短的過期時間。
准備工作
使用koa-jwt的大致流程是:
1. 用戶通過身份驗證API(登錄)獲取當前用戶在有效期內的token
2. 需要身份驗證的API則都需要攜帶此前認證過的token發送至服務端
3. koa會利用koa-jwt中間件的默認驗證方式進行身份驗證,中間件會進行驗證成功和驗證失敗的分流。
koa-jwt中間件的驗證方式有三種:
1. 在請求頭中設置 authorization為Bearer + token,注意Bearer后有空格。(koa-jwt的默認驗證方式)
{'authorization': "Bearer " + token}
2. 自定義getToken方法
3. 利用Cookie(此cookie非彼cookie)此處的Cookie只作為存儲介質發給服務端的區域,校驗並不依賴於服務端的session機制,服務端不會進行任何狀態的保存。
實戰邏輯:
1.在登錄路由中進行驗證,可攜帶用戶名等必要信息,並將其放至上下文對象中。
router.post('/login', async (ctx, next) => {
const user = ctx.request.body;
if (user && user.username === 'tate') {
let {username} = user;
const token = sign({username, test: 'testok'}, secret, {expiresIn: '1h'});
ctx.body = {
mssage: 'GET TOKEN SUCCESS',
code: 1,
token
}
} else {
ctx.body = {
message: 'param error',
code: -1
}
}
})
2. 客戶端登錄成功並獲取token信息后,將其保存在客戶端中。如localstorage。
3. 在訪問需要用戶登錄信息驗證的接口是,需要將請求頭設置authorization。此處我使用過兩種方式:
(1)利用jquery或axios等前端庫在對應的鈎子中進行攔截設置請求頭,此處以jq為例。這種思路有一個比較麻煩的點就是,所有需要驗證的接口都需要單獨設置請求頭。如果用戶自己通過url上拼裝token進行訪問,則不能實現對應效果。
$.ajax({
url: '/userinfo',
type: 'get',
data: {
param1: 'post1',
param2: 'post2',
token: localStorage.getItem('token')
},
beforeSend: function (xhr) {
xhr.setRequestHeader("authorization","Bearer " + localStorage.getItem('token'));
},
success: function (msg) {
console.log(msg);
},
fail: function (err) {
console.log(err);
}
})
(2)第二種就是利用koa的中間件在總路由中進行攔截處理。只要存在拼裝了token字段的參數,就進行驗證。此方法最大的優點就是遍歷,但注意的一點是,需要在后端總路由攔截時做好架構,以免對其他路由造成干擾。
app.use(bodyParser())
app.use(async (ctx, next) => {
console.log(ctx)
let params =Object.assign({}, ctx.request.query, ctx.request.body);
ctx.request.header = {'authorization': "Bearer " + (params.token || '')}
await next();
})
3.利用koa-jwt設置需要驗證才能訪問的接口,驗證成功后可在上下文中的state中獲取狀態信息。
router.get('/userinfo', jwt, async (ctx, next) => {
ctx.body = {username: ctx.state.user.username}
console.log(ctx)
})
.get('/viplist', jwt, async (ctx, next) => {
console.log(ctx.state)
ctx.body = 'check ok'
})
以下為核心后端文件的源碼:
const koa = require('koa');
const app = new koa();
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const router = new Router();
const views = require('koa-views');
const static = require('koa-static');
const path = require('path');
const { sign } = require('jsonwebtoken');
const secret = 'demo';
const jwt = require('koa-jwt')({secret});
app.use(bodyParser())
app.use(views(__dirname + '/views', {
map: {html: 'ejs'}
}))
app.use(static(path.join(__dirname, '/static')))
app.use(async (ctx, next) => {
console.log(ctx)
let params =Object.assign({}, ctx.request.query, ctx.request.body);
ctx.request.header = {'authorization': "Bearer " + (params.token || '')}
await next();
})
router.get('/', async (ctx, next) => {
await ctx.render('index')
})
router.post('/login', async (ctx, next) => {
const user = ctx.request.body;
if (user && user.username === 'tate') {
let {username} = user;
const token = sign({username, test: 'testok'}, secret, {expiresIn: '1h'});
ctx.body = {
mssage: 'GET TOKEN SUCCESS',
code: 1,
token
}
} else {
ctx.body = {
message: 'param error',
code: -1
}
}
})
.get('/userinfo', jwt, async (ctx, next) => {
ctx.body = {username: ctx.state.user.username}
console.log(ctx)
})
.get('/viplist', jwt, async (ctx, next) => {
console.log(ctx.state)
ctx.body = 'check ok'
})
router.get('/404', async (ctx, next) => {
await ctx.render('404')
})
app
.use(router.routes())
.use(router.allowedMethods())
app.listen(3000, () => {
console.log('server is running at port 3000');
console.log(3)
})
