JSON Web Token(JWT)是目前最流行的跨域身份驗證解決方案。前端
架構圖:git
特色:github
> npm install jsonwebtoken express-jwt -S
var jwt = require('jsonwebtoken'); // 生成token function generateToken() { return jwt.sign({ foo: 'bar', }, 'hahaha', { expiresIn: '1d' // 1天 https://github.com/zeit/ms }); }
如登陸完成後返回給前端web
router.post('/xxx/login', function(req, res, next) { res.json({ status: true, data: { token: generateToken() }, message: '登陸成功!' }); });
拿到服務端返回的token後,這裏要存儲起來,而後在須要驗證的接口上添加token,傳輸給服務端,headers傳輸示例以下:ajax
$.ajax({ headers: { token: localStorage.getItem('token') // 經過headers傳輸token到服務端 }, // ... });
var jwt = require('jsonwebtoken'); router.use(function(req, res, next) { if(req.headers.hasOwnProperty('token')) { jwt.verify(req.headers.token, 'hahaha', function(err, decoded) { if(err) { res.json({ status: false, message: 'token不存在或已過時' }); } else { next(); } }); } else { next(); } });
上面代碼是純使用jsonwebtoken方式處理的,從生成傳輸到驗證一條龍。數據庫
總體流程:express
服務端生成方式不變,不過前端的傳輸方式變成這樣了,這裏再也不是token了,而是約定好的authorization了npm
$.ajax({ headers: { authorization: 'Bearer ' + localStorage.getItem('token') // "Bearer "這個也是約定的,必須是這樣的格式 }, // ... });
服務端使用json
router.post('/xxx', expressJWT({secret: 'hahaha'}), function (req, res, next) { // ... });
前端驗證跨域
$.ajaxSetup({ complete: function (res) { // 接口請求完成攔截 // 驗證token,不存在 從新獲取或退出登陸 } });
總體步驟很少,因爲是封裝好的,使用起來也比較方便。
JWT缺點:
爲了減小盜用和竊取,JWT不建議使用HTTP協議來傳輸代碼,而是使用加密的HTTPS協議進行傳輸。