JWT
JSON Web Token (JWT)是一個開放標準(RFC 7519)，它定義了一種緊湊的、自包含的方式，用于作為JSON對象在各方之間安全地傳輸信息。該信息可以被驗證和信任，因為它是數(shù)字簽名的。
本文只講Koa2 + jwt的使用，不了解JWT的話請到這里)進行了解。
koa環(huán)境
要使用koa2+jwt需要先有個koa的空環(huán)境，搭環(huán)境比較麻煩，我直接使用koa起手式，這是我使用koa+typescript搭建的空環(huán)境，如果你也經(jīng)常用koa寫寫小demo,可以點個star，方便~
安裝koa-jwt
koa-jwt主要作用是控制哪些路由需要jwt驗證，哪些接口不需要驗證：
import * as koaJwt from 'koa-jwt';//路由權限控制 除了path里的路徑不需要驗證token 其他都要app.use( koaJwt({ secret: secret.sign }).unless({ path: [/^//login/, /^//register/] }));上面代碼中，除了登錄、注冊接口不需要jwt驗證，其他請求都需要。
使用jsonwebtoken生成、驗證token
執(zhí)行npm install jsonwebtoken安裝jsonwebtoken
相關代碼：
import * as jwt from 'jsonwebtoken';const secret = 'my_app_secret';const payload = {user_name:'Jack', id:3, email: '1234@gmail.com'};const token = jwt.sign(payload, secret, { expiresIn: '1h' });上面代碼中通過jwt.sign來生成一個token，
參數(shù)意義：
在登錄中返回token
import * as crypto from 'crypto';import * as jwt from 'jsonwebtoken';async login(ctx){ //從數(shù)據(jù)庫中查找對應用戶 const user = await userRespository.findOne({ where: { name: user.name } }); //密碼加密 const psdMd5 = crypto .createHash('md5') .update(user.password) .digest('hex'); //比較密碼的md5值是否一致 若一致則生成token并返回給前端 if (user.password === psdMd5) { //生成token token = jwt.sign(user, secret, { expiresIn: '1h' }); //響應到前端 ctx.body = { token } }}前端攔截器
前端通過登錄拿到返回過來的token，可以將它存在localStorage里，然后再以后的請求中把token放在請求頭的Authorization里帶給服務端。
這里以axios請求為例，在發(fā)送請求時，通過請求攔截器把token塞到header里：
//請求攔截器axios.interceptors.request.use(function(config) { //從localStorage里取出token const token = localStorage.getItem('tokenName'); //把token塞入Authorization里 config.headers.Authorization = `Bearer ${token}`; return config; }, function(error) { // Do something with request error return Promise.reject(error); });服務端處理前端發(fā)送過來的Token
前端發(fā)送請求攜帶token，后端需要判斷以下幾點：
token是否正確，不正確則返回錯誤
token是否過期，過期則刷新token 或返回401表示需要從新登錄
關于上面兩點，需要在后端寫一個中間件來完成：
app.use((ctx, next) => { if (ctx.header && ctx.header.authorization) { const parts = ctx.header.authorization.split(' '); if (parts.length === 2) { //取出token const scheme = parts[0]; const token = parts[1]; if (/^Bearer$/i.test(scheme)) { try { //jwt.verify方法驗證token是否有效 jwt.verify(token, secret.sign, { complete: true }); } catch (error) { //token過期 生成新的token const newToken = getToken(user); //將新token放入Authorization中返回給前端 ctx.res.setHeader('Authorization', newToken); } } } } 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; }}); }); 上面中間件是需要驗證token時都需要走這里，可以理解為攔截器，在這個攔截器中處理判斷token是否正確及是否過期，并作出相應處理。
后端刷新token 前端需要更新token
后端更換新token后，前端也需要獲取新token 這樣請求才不會報錯。
由于后端更新的token是在響應頭里，所以前端需要在響應攔截器中獲取新token。
依然以axios為例：
//響應攔截器axios.interceptors.response.use(function(response) { //獲取更新的token const { authorization } = response.headers; //如果token存在則存在localStorage authorization && localStorage.setItem('tokenName', authorization); return response; }, function(error) { if (error.response) { const { status } = error.response; //如果401或405則到登錄頁 if (status == 401 || status == 405) { history.push('/login'); } } return Promise.reject(error); });總結
以上所述是小編給大家介紹的koa+jwt實現(xiàn)token驗證與刷新功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
