JSON Web Token(JWT)是目前最流行的 跨域身份驗證解決方案,相較於session機制, 服務器就不須要保存任何 session 數據了,也就是說, 服務器變成無狀態了,從而比較容易實現擴展。JWT 其實是一個令牌(Token),服務器會將一些 元數據、 指定的secret進行 簽名並生成token,並返回給客戶端,客戶端獲得這個服務器返回的令牌後,須要 將其存儲到 Cookie 或 localStorage 中,此後, 每次與服務器通訊都要帶上這個令牌,能夠把它放到 Cookie 中自動發送,但這樣作不能跨域,因此更好的作法是將其放到 HTTP 請求頭 Authorization 字段裏面。
① 安裝並引入jsonwebtoken模塊;
② 對元數據、secret密鑰進行簽名,並生成對應的token;
③ 對token進行校驗是否過時;ios
const jwt = require("jsonwebtoken"); // 引入jwt const secret = "this is a private key"; // 指定一個用於生成token的密鑰字符串 const token = jwt.sign({ foo: 'bar' }, secret, { // 傳入元數據和secret密鑰,並指定過時時間生成token expiresIn: 5, // 單獨一個數字表示多少秒 // expiresIn: "10h", // 表示10小時後過時 // expiresIn: "2d" // 表示2天后過時 }); console.log(`token is ${token}`); setTimeout(() => { // 5秒後對該token進行校驗 jwt.verify(token, secret, (err, decoded) => { console.log(err); if (err) { console.log('token 已經失效了.'); } else { console.log(`token data is ${JSON.stringify(decoded)}`); } }); }, 5000);
生成的token爲一個很長的字符串,分爲三部分,每部分由.號隔開,即 頭部.載荷.簽名,5秒後token校驗結果爲error,即token已通過期,校驗的時候,會獲得token的解碼數據,主要包括生成token時候的 元數據、 token的簽發時間(iat)、 token的過時時間(exp)
// 生成的token字符串爲 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1NjY3MzE4MzEsImV4cCI6MTU2NjczMTgzNn0.cZZkExNnVqBtnfQN2vtU2Z7JB0PBo1CFyC5NiOywg54
// token decoded後的數據 token data is {"foo":"bar","iat":1566731831,"exp":1566731836}
因爲在使用jwt認證的時候,客戶端向服務器發起請求的時候, 都要帶上token,即要獲取到token並將其 放到請求頭的Authorization字段中,服務器才能從authorization中取出token並進行校驗,因此咱們必須經過 攔截器去實現,在每次請求以前將請求進行攔截,而後添加上token,再繼續向服務器發起請求。
import axios from "axios"; class Request { constructor() { this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/'; // 設置請求baseURL this.timeout = 2000; // 設置請求超時時間 } request(config){// 這裏的config是請求的時候傳遞的參數配置對象,好比url、method、data等 const instance = axios.create({ // 建立axios實例 baseURL: this.baseURL, timeout: this.timeout, }); // 設置攔截器 instance.interceptors.request.use((config) => { // 請求攔截以後就是要使用這個config, config表示整個請求對象 config.headers.Authorization = localStorage.getItem('token'); // 將token從localStorage中取出並添加到請求頭的Authorization字段上 return config; // 返回請求對象,繼續向服務器發起請求 }, err => Promise.reject(err)); // 設置響應攔截器 instance.interceptors.response.use(res => res.data, err => Promise.reject(err)); return instance(config); } } export default new Request();
咱們須要在路由跳轉以前,進行登陸校驗,即 校驗登陸的token是否已通過期,若是token沒有失效,則能夠繼續訪問頁面;若是token已經失效,那麼檢查一下 所訪問的頁面是否須要登陸才能訪問,若是是須要登陸後才能訪問,那麼跳轉到登陸頁面;若是是不須要登陸也能訪問的頁面則繼續訪問;
const whiteList = ["/"]; // 定義一個白名單列表 router.beforeEach(async (to, from, next) => { if (whiteList.includes(to.path)) { // 若是是訪問的白名單中的頁面 return next(); // 不須要校驗,直接返回繼續訪問該頁面 } const isTokenAvailable = await store.dispatch('validate'); // 校驗token是否失效 if (isTokenAvailable) { // 若是token未失效 if(to.path === "/login") { // 若是訪問的是login頁面,則回到首頁 next("/"); } else { // 若是訪問的不是login頁面,則繼續訪問當前要訪問的頁面 next(); } } else { // 若是token失效了 const needLogin = to.matched.some(item => item.meta.needLogin); // 檢測要訪問的頁面是否須要登陸才能訪問 if(needLogin) { // 若是訪問的頁面是須要登陸的 next("/login"); // 跳轉到登陸頁面 } else { // 若是訪問的頁面是不須要登陸的,則直接繼續訪問 next(); } } });
上面item.meta.needLogin,這個needLogin是在router中進行自定義配置的,在配置路由的時候, 容許經過meta屬性配置一些自定義的元數據,以下所示:
export default new Router({ routes: [ { path: '/profile', name: 'profile', component: Profile, meta: {needLogin: true} } ] })
jwt認證,主要就是Vue路由鉤子 beforeEach()的應用,以及請求攔截器的封裝,在每次 路由跳轉前進行token認證(校驗),檢測token是否失效,其校驗過程就是 向服務器發起一個請求,好比"/validate",因爲客戶端請求 攔截器的做用,會在發起"/validate"請求以前,在請求頭的 Authorization字段加上token,服務器收到token後就能對token是否有效進行校驗了,而後返回token校驗結果, 客戶端再根據token的校驗結果進行路由的具體跳轉。