摘要:一前言,是為了在網絡環境間傳遞聲明而執行的一種基于的開放標準。用戶簽發添加中間件校驗判斷是否可用獲取解密,獲取用戶名和認證失敗中添加處理此處在開發時需要過濾掉登錄接口,否則會導致驗證永遠失敗。前端處理前端開發使用的是,發送請求使用的是。
一、前言
JWT(JSON Web Token),是為了在網絡環境間傳遞聲明而執行的一種基于JSON的開放標準(RFC 7519)。
JWT不是一個新鮮的東西,網上相關的介紹已經非常多了。不是很了解的可以在網上搜索一下相關信息。
同步到sau交流學習社區:https://www.mwcxs.top/page/45...
Talk is cheap. Show me the code.
三、工作流程JWT本質來說是一個token。在前后端進行HTTP連接時來進行相應的驗證。
四、實現過程 1. 登錄成功生成JWT博客的后臺管理系統發起登錄請求,后端服務器校驗成功之后,生成JWT認證信息;
前端接收到JWT后進行存儲;
前端在之后每次接口調用發起HTTP請求時,會將JWT放到HTTP的headers參數里的authorization中一起發送給后端;
后端接收到請求時會根據JWT中的信息來校驗當前發起HTTP請求的用戶是否是具有訪問權限的,有訪問權限時則交給服務器繼續處理,沒有時則直接返回401錯誤。
說明:以下代碼只保留了核心代碼,詳細代碼可在對應文件中查看,下同。
// /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/son...
【后端】(https://github.com/saucxs/son...
都已在GitHub上開源,目前在逐步完善功能中。歡迎感興趣的同學fork和star。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99358.html
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 3049·2023-04-26 03:01
閱讀 3544·2023-04-25 19:54
閱讀 1596·2021-11-24 09:39
閱讀 1378·2021-11-19 09:40
閱讀 4255·2021-10-14 09:43
閱讀 2073·2019-08-30 15:56
閱讀 1500·2019-08-30 13:52
閱讀 1665·2019-08-29 13:05