1. JWT是什么
JSON Web Token (JWT)，它是目前最流行的跨域身份驗證解決方案
2. 為什么使用JWT
JWT的精髓在於：“去中心化”，數據是保存在客戶端的。
3. JWT的工作原理
1. 是在服務器身份驗證之后，將生成一個JSON對象並將其發送回用戶，示例如下：
{"UserName": "Chongchong","Role": "Admin","Expire": "2018-08-08 20:15:56"}
2. 之后，當用戶與服務器通信時，客戶在請求中發回JSON對象
3. 為了防止用戶篡改數據，服務器將在生成對象時添加簽名，並對發回的數據進行驗
4. JWT組成
JWT結構原理圖：
JWT實際結構：
eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1Njc4NDUzNzMsImlhdCI6MTU2Nzg0MzU3MywiYWdlIjoxOCwianRpIjoiNjhiY2UwZmE4YTRjNDliYTgxYjk4MzNkMGJmODUxNTIiLCJ1c2VybmFtZSI6InpzcyJ9._lHPWwABbs9D7nr4ocVeZoJ-65ZadB-HpiPGUXIGquY
它是一個很長的字符串，中間用點（.）分隔成三個部分。
4.1 Header
{"typ":"JWT","alg":"HS256"}
這個json中的typ屬性，用來標識整個token字符串是一個JWT字符串；它的alg屬性，用來說明這個JWT簽發的時候所使用的簽名和摘要算法
typ跟alg屬性的全稱其實是type跟algorithm，分別是類型跟算法的意思。之所以都用三個字母來表示，也是基於JWT最終字串大小的考慮，
同時也是跟JWT這個名稱保持一致，這樣就都是三個字符了…typ跟alg是JWT中標准中規定的屬性名稱
4.2 Payload(負荷)
{"sub":"123","name":"Tom","admin":true}
payload用來承載要傳遞的數據，它的json結構實際上是對JWT要傳遞的數據的一組聲明，這些聲明被JWT標准稱為claims，
它的一個“屬性值對”其實就是一個claim(要求)，
每一個claim的都代表特定的含義和作用。
注1：英文“claim”就是要求的意思
注2：如上面結構中的sub代表這個token的所有人，存儲的是所有人的ID；name表示這個所有人的名字；admin表示所有人是否管理員的角色。當后面對JWT進行驗證的時候，這些claim都能發揮特定的作用
注3：根據JWT的標准，這些claims可以分為以下三種類型：
A. Reserved claims(保留)
它的含義就像是編程語言的保留字一樣，屬於JWT標准里面規定的一些claim。JWT標准里面定義好的claim有：
iss(Issuser)：代表這個JWT的簽發主體；
sub(Subject)：代表這個JWT的主體，即它的所有人；
aud(Audience)：代表這個JWT的接收對象；
exp(Expiration time)：是一個時間戳，代表這個JWT的過期時間；
nbf(Not Before)：是一個時間戳，代表這個JWT生效的開始時間，意味着在這個時間之前驗證JWT是會失敗的；
iat(Issued at)：是一個時間戳，代表這個JWT的簽發時間；
jti(JWT ID)：是JWT的唯一標識。
B. Public claims，略（不重要）
C. Private claims(私有)
這個指的就是自定義的claim，比如前面那個示例中的admin和name都屬於自定的claim。這些claim跟JWT標准規定的claim區別在於：JWT規定的claim，JWT的接收方在拿到JWT之后，都知道怎么對這些標准的claim進行驗證；而private claims不會驗證，除非明確告訴接收方要對這些claim進行驗證以及規則才行
按照JWT標准的說明：保留的claims都是可選的，在生成payload不強制用上面的那些claim，你可以完全按照自己的想法來定義payload的結構，不過這樣搞根本沒必要：
第一是，如果把JWT用於認證， 那么JWT標准內規定的幾個claim就足夠用了，甚至只需要其中一兩個就可以了，假如想往JWT里多存一些用戶業務信息，比如角色和用戶名等，這倒是用自定義的claim來添加；第二是，JWT標准里面針對它自己規定的claim都提供了有詳細的驗證規則描述，每個實現庫都會參照這個描述來提供JWT的驗證實現，所以如果是自定義的claim名稱，那么你用到的實現庫就不會主動去驗證這些claim
4.3 signature
簽名是把header和payload對應的json結構進行base64url編碼之后得到的兩個串用英文句點號拼接起來，然后根據header里面alg指定的簽名算法生成出來的。
算法不同，簽名結果不同。以alg: HS256為例來說明前面的簽名如何來得到。
按照前面alg可用值的說明，HS256其實包含的是兩種算法：HMAC算法和SHA256算法，前者用於生成摘要，后者用於對摘要進行數字簽名。這兩個算法也可以用HMACSHA256來統稱
5. JWT的驗證過程
它驗證的方法其實很簡單，只要把header做base64url解碼，就能知道JWT用的什么算法做的簽名，然后用這個算法，再次用同樣的邏輯對header和payload做一次簽名，並比較這個簽名是否與JWT本身包含的第三個部分的串是否完全相同，只要不同，就可以認為這個JWT是一個被篡改過的串，自然就屬於驗證失敗了。接收方生成簽名的時候必須使用跟JWT發送方相同的密鑰
注1：在驗證一個JWT的時候，簽名認證是每個實現庫都會自動做的，但是payload的認證是由使用者來決定的。因為JWT里面可能會包含一個自定義claim，
所以它不會自動去驗證這些claim，以jjwt-0.7.0.jar為例：
A 如果簽名認證失敗會拋出如下的異常：
io.jsonwebtoken.SignatureException: JWT signature does not match locally computed signature. JWT validity cannot be asserted and should not be trusted.
即簽名錯誤，JWT的簽名與本地計算機的簽名不匹配
B JWT過期異常
io.jsonwebtoken.ExpiredJwtException: JWT expired at 2017-06-13T11:55:56Z. Current time: 2017-06-13T11:55:57Z, a difference of 1608 milliseconds. Allowed
注2：認證失敗，返回401 Unauthorized響應
注3：認證服務作為一個Middleware HOOK 對請求進行攔截，首先在cookie中查找Token信息，如果沒有找到，則在HTTP Authorization Head中查找
6. JWT令牌刷新思路
.1 登陸成功后，將生成的JWT令牌通過響應頭返回給客戶端
.2 WEB APP項目每次請求后台數據時(將JWT令牌從請求頭中帶過來)，
驗證通過，刷新JWT，並保存在響應頭返回給客戶端，有效時間30分鍾
代碼示例：
JwtFilter.java
UserAction.java
http.js
/** * vue項目對axios的全局配置 */ import axios from 'axios' import qs from 'qs' //引入action模塊，並添加至axios的類屬性urls上 import action from '@/api/action' axios.urls = action // axios默認配置 axios.defaults.timeout = 10000; // 超時時間 // axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默認地址 axios.defaults.baseURL = action.SERVER; //整理數據 // 只適用於 POST,PUT,PATCH，transformRequest` 允許在向服務器發送前，修改請求數據 axios.defaults.transformRequest = function(data) { data = qs.stringify(data); return data; }; // 請求攔截器 axios.interceptors.request.use(function(config) { var jwt = window.vm.$store.getters.getJwt; config.headers['jwt'] = jwt; return config; }, function(error) { return Promise.reject(error); }); // 響應攔截器 axios.interceptors.response.use(function(response) { // debugger; var jwt = response.headers['jwt']; if(jwt){ window.vm.$store.commit('setJwt',{jwt:jwt}); } return response; }, function(error) { return Promise.reject(error); }); // // 路由請求攔截 // // http request 攔截器 // axios.interceptors.request.use( // config => { // //config.data = JSON.stringify(config.data); // //config.headers['Content-Type'] = 'application/json;charset=UTF-8'; // //config.headers['Token'] = 'abcxyz'; // //判斷是否存在ticket，如果存在的話，則每個http header都加上ticket // // if (cookie.get("token")) { // // //用戶每次操作，都將cookie設置成2小時 // // cookie.set("token", cookie.get("token"), 1 / 12) // // cookie.set("name", cookie.get("name"), 1 / 12) // // config.headers.token = cookie.get("token"); // // config.headers.name = cookie.get("name"); // // } // return config; // }, // error => { // return Promise.reject(error.response); // }); // // 路由響應攔截 // // http response 攔截器 // axios.interceptors.response.use( // response => { // if (response.data.resultCode == "404") { // console.log("response.data.resultCode是404") // // 返回 錯誤代碼-1 清除ticket信息並跳轉到登錄頁面 // // cookie.del("ticket") // // window.location.href='http://login.com' // return // } else { // return response; // } // }, // error => { // return Promise.reject(error.response) // 返回接口返回的錯誤信息 // }); export default axios;
State.js
export default{ resturantName:'飛歌餐館', jwt:'' }
Getters.js
export default { getResturantName: (state) => { return state.resturantName; }, getJwt: (state) => { return state.jwt; } }
Mutations.js
export default{ // type(事件類型)： 其值為setResturantName // payload：載荷，其實就是一個保存要傳遞參數的容器 setResturantName: (state, payload) => { state.resturantName = payload.resturantName; }, setJwt: (state, payload) => { state.jwt = payload.jwt; } }
效果如下：
直接進入頁面沒有數據：
登陸后進入才有數據：
