資訊專欄INFORMATION COLUMN
摘要：前言由于自己開發的項目中用到了技術，前端采用了框架，后端采用了框架，故作此文幫助使用相同技術棧的朋友們。具體思路如下把后端生成的存入，然后前端切換路由刷新頁面的時候，通過請求的時候帶上這個，提交給后端判斷當前的是否有效，后端返回結果。
前言
由于自己開發的項目中用到了 JWT 技術，前端采用了 Vue.js 框架，后端采用了 CodeIgniter 框架，故作此文幫助使用相同技術棧的朋友們。
具體思路如下：
把后端生成的 JWT token 存入 localStorage，然后前端切換路由（刷新頁面）的時候，通過 Ajax 請求的時候帶上這個 token，提交給后端判斷當前的 token 是否有效，后端返回結果。
JWT 用處很多，可以用于后臺權限的限制、接口安全性校驗。
使用教程 前端 Vue.js vue-router登錄時，將后端返回的 token 存入 localStorage
使用 Vue-Router 判斷是否存在 token，不存在跳轉至登錄
// JWT 用戶權限校驗，判斷 TOKEN 是否在 localStorage 當中
router.beforeEach(({name}, from, next) => {
// 獲取 JWT Token
if (localStorage.getItem("JWT_TOKEN")) {
// 如果用戶在login頁面
if (name === "login") {
next("/");
} else {
next();
}
} else {
if (name === "login") {
next();
} else {
next({name: "login"});
}
}
});
axios
axios 全局配置攔截器
每次向后端請求攜帶 頭信息
在 src/main.js 當中加上以下代碼：
// http request 攔截器
axios.interceptors.request.use(
config => {
if (localStorage.JWT_TOKEN) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
config.headers.Authorization = `token ${localStorage.JWT_TOKEN}`;
}
return config;
},
err => {
return Promise.reject(err);
});
// http response 攔截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
console.log("axios:" + error.response.status);
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳轉到登錄頁面
store.commit("LOG_OUT");
router.replace({
path: "login",
query: {redirect: router.currentRoute.fullPath}
});
}
}
return Promise.reject(error.response.data); // 返回接口返回的錯誤信息
});
Vue.prototype.$http = axios;
后端 CodeIgniter
后端 Controller 接收請求頭信息，驗證 token 有效性，無效返回 401 狀態碼
$header = $this->input->get_request_header("Authorization", TRUE); // 獲取請求頭 Authorization
list($token) = sscanf($header, "token %s"); // 提取 token
if ($header != "" && jwt_helper::validate($token)) {
$userid = jwt_helper::decode($header)->userId; // 解碼token 提取 userId 字段
// do something
} else {
show_error("Permission denied", 401, "Please check your token."); // 401錯誤
}
這里提供了自己使用的封裝好的 JWT Helper 類 和 JWT 的庫 使用方法和文件可以訪問 Github安全性
倉庫：https://github.com/52admln/JW...
可參考文章：http://www.cnblogs.com/xiekel... 當中的基于JWT的Token認證的安全問題。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/31972.html
摘要：前言記錄前后端分離的系統應用下應用場景用戶信息傳遞需求緣起照例先看看系統的一張經典架構圖，這張圖參考自網絡在自定義異常，你是怎么處理的中已經對該架構做了簡單說明，這里不再描述。 showImg(https://segmentfault.com/img/remote/1460000017839927?w=1024&h=768); 前言 記錄前后端分離的系統應用下應用場景————用戶信息傳...
摘要：到這里，基于的前后端分離實現方案就搞定啦四關于的一些思考實際上，在使用的過程中有一個比較致命的缺點，就是一旦簽發了，在到期之前就會始終有效，除非服務器部署額外的邏輯。結語以上是關于基于的前后端分離實現方案的總結和思考。 一、jwt是什么 JWT全稱， JSON Web Token，是一個以JSON為基準的標準規范。 舉例：服務器認證以后，生成一個 JSON 對象，發回給用戶，就像下...
摘要：自己在前后端分離上的實踐要想實現完整的前后端分離，安全這塊是繞不開的，這個系統主要功能就是動態管理，這次實踐包含兩個模塊基于搭建的權限管理系統后臺編寫的前端管理。 自己在前后端分離上的實踐 要想實現完整的前后端分離，安全這塊是繞不開的，這個系統主要功能就是動態restful api管理，這次實踐包含兩個模塊,基于springBoot + shiro搭建的權限管理系統后臺bootshir...
摘要：自己在前后端分離上的實踐要想實現完整的前后端分離，安全這塊是繞不開的，這個系統主要功能就是動態管理，這次實踐包含兩個模塊基于搭建的權限管理系統后臺編寫的前端管理。 自己在前后端分離上的實踐 要想實現完整的前后端分離，安全這塊是繞不開的，這個系統主要功能就是動態restful api管理，這次實踐包含兩個模塊,基于springBoot + shiro搭建的權限管理系統后臺bootshir...
閱讀 3009·2021-10-08 10:18
閱讀 729·2019-08-30 15:54
閱讀 1061·2019-08-29 18:43
閱讀 2433·2019-08-29 15:33
閱讀 1298·2019-08-29 15:29
閱讀 1598·2019-08-29 13:29
閱讀 1022·2019-08-26 13:46
閱讀 1692·2019-08-26 11:55
