sau交流學習社群--songEagle開發系列:Vue.js + Koa.js專案中使用JWT認證
一、前言
JWT(JSON Web Token),是為了在網路環境間傳遞宣告而執行的一種基於JSON的開放標準(RFC 7519)。
JWT不是一個新鮮的東西,網上相關的介紹已經非常多了。不是很瞭解的可以在網上搜索一下相關資訊。
同步sau交流學習社群:https://www.mwcxs.top/page/454.html
二、原始碼
Talk is cheap. Show me the code.
三、工作流程
JWT本質來說是一個token。在前後端進行HTTP連線時來進行相應的驗證。
1. 部落格的後臺管理系統發起登入請求,後端伺服器校驗成功之後,生成JWT認證資訊;
2. 前端接收到JWT後進行儲存;
3. 前端在之後每次介面呼叫發起HTTP請求時,會將JWT放到HTTP的headers引數裡的authorization中一起傳送給後端;
4. 後端接收到請求時會根據JWT中的資訊來校驗當前發起HTTP請求的使用者是否是具有訪問許可權的,有訪問許可權時則交給伺服器繼續處理,沒有時則直接返回401錯誤。
四、實現過程
1. 登入成功生成JWT
說明:以下程式碼只保留了核心程式碼,詳細程式碼可在對應檔案中檢視,下同。
// /server/api/admin/admin.controller.js const jwt = require('jsonwebtoken'); const config= require('../../config/config'); exports.login = async(ctx) => { // ... if (hashedPassword === hashPassword) { // ... // 使用者token const userToken = { name: userName, id: results[0].id }; // 簽發token const token = jwt.sign(userToken, config.tokenSecret, { expiresIn: '2h' });// ... } // ... }
2. 新增中介軟體校驗JWT、
// /server/middlreware/tokenError.js const jwt = require('jsonwebtoken'); const config = require('../config/config'); const util = require('util'); const verify = util.promisify(jwt.verify); /** * 判斷token是否可用 */ module.exports = function () { return async function (ctx, next) { try { // 獲取jwt const token = ctx.header.authorization; if (token) { try { // 解密payload,獲取使用者名稱和ID let payload = await verify(token.split(' ')[1], config.tokenSecret); ctx.user = { name: payload.name, id: payload.id }; } catch (err) { console.log('token verify fail: ', err) } } await next(); } catch (err) { if (err.status === 401) { ctx.status = 401; ctx.body = { success: 0, message: '認證失敗' }; } else { err.status = 404; ctx.body = { success: 0, message: '404' }; } } } }
3. Koa.js中新增JWT處理
此處在開發時需要過濾掉登入介面(login),否則會導致JWT驗證永遠失敗。
// /server/config/koa.js const jwt = require('koa-jwt'); const tokenError = require('../middlreware/tokenError'); // ... const app = new Koa(); app.use(tokenError()); app.use(bodyParser()); app.use(koaJson()); app.use(resource(path.join(config.root, config.appPath))); app.use(jwt({ secret: config.tokenSecret }).unless({ path: [/^\/backapi\/admin\/login/, /^\/blogapi\//] })); module.exports = app;
4.前端處理
前端開發使用的是Vue.js,傳送HTTP請求使用的是axios。
1. 登入成功之後將JWT儲存到localStorage中(可根據個人需要儲存,我個人是比較喜歡儲存到localStorage中)。
methods: { login: async function () { // ... let res = await api.login(this.userName, this.password); if (res.success === 1) { this.errMsg = ''; localStorage.setItem('SONG_EAGLE_TOKEN', res.token); this.$router.push({ path: '/postlist' }); } else { this.errMsg = res.message; } } }
2. Vue.js的router(路由)跳轉前校驗JWT是否存在,不存在則跳轉到登入頁面。
// /src/router/index.js router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { const token = localStorage.getItem('SONG_EAGLE_TOKEN'); if (token && token !== 'null') { next(); } else { next('/login'); } } else { next(); } });
3. axios攔截器中給HTTP統一新增Authorization資訊
// /src/api/config.js axios.interceptors.request.use( config => { const token = localStorage.getItem('SONG_EAGLE_TOKEN'); if (token) { // Bearer是JWT的認證頭部資訊 config.headers.common['Authorization'] = 'Bearer ' + token; } return config; }, error => { return Promise.reject(error); } );
4. axios攔截器在接收到HTTP返回時統一處理返回狀態
// /src/main.js axios.interceptors.response.use( response => { return response; }, error => { if (error.response.status === 401) { Vue.prototype.$msgBox.showMsgBox({ title: '錯誤提示', content: '您的登入資訊已失效,請重新登入', isShowCancelBtn: false }).then((val) => { router.push('/login'); }).catch(() => { console.log('cancel'); }); } else { Vue.prototype.$message.showMessage({ type: 'error', content: '系統出現錯誤' }); } return Promise.reject(error); } );
五、總結
這個基本上就是JWT的流程。當然單純的JWT並不是說絕對安全的,不過對於一個個人部落格系統的認證來說還是足夠的。
最後打個小廣告。目前正在開發新版的個人部落格中,包括兩部分:
【前端】(https://github.com/saucxs/songEagle)
【後端】(https://github.com/saucxs/songEagle_backManage)
都已在GitHub上開源,目前在逐步完善功能中。歡迎感興趣的同學fork和star。