怎么在Vue路由中實現(xiàn)JWT身份認(rèn)證？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站是專業(yè)的解放網(wǎng)站建設(shè)公司，解放接單;提供成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行解放網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

一、JWT身份認(rèn)證簡介

JSON Web Token（JWT）是目前最流行的跨域身份驗證解決方案，相較于session機制，服務(wù)器就不需要保存任何 session 數(shù)據(jù)了，也就是說，服務(wù)器變成無狀態(tài)了，從而比較容易實現(xiàn)擴展。JWT 實際上是一個令牌（Token），服務(wù)器會將一些元數(shù)據(jù)、指定的secret進行簽名并生成token，并返回給客戶端，客戶端得到這個服務(wù)器返回的令牌后，需要將其存儲到 Cookie 或 localStorage 中，此后，每次與服務(wù)器通信都要帶上這個令牌，可以把它放到 Cookie 中自動發(fā)送，但這樣做不能跨域，所以更好的做法是將其放到 HTTP 請求頭 Authorization 字段里面。

二、JWT的使用

① 安裝并引入jsonwebtoken模塊；
② 對元數(shù)據(jù)、secret密鑰進行簽名，并生成對應(yīng)的token；
③ 對token進行校驗是否過期；

const jwt = require("jsonwebtoken"); // 引入jwt
const secret = "this is a private key"; // 指定一個用于生成token的密鑰字符串
const token = jwt.sign({ foo: 'bar' }, secret, { // 傳入元數(shù)據(jù)和secret密鑰，并指定過期時間生成token
  expiresIn: 5, // 單獨一個數(shù)字表示多少秒
  // 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 已經(jīng)失效了.');
    } else {
      console.log(`token data is ${JSON.stringify(decoded)}`);
    }
  });
}, 5000);

生成的token為一個很長的字符串，分為三部分，每部分由.號隔開，即 頭部.載荷.簽名，5秒后token校驗結(jié)果為error，即token已經(jīng)過期，校驗的時候，會得到token的解碼數(shù)據(jù)，主要包括生成token時候的元數(shù)據(jù)、token的簽發(fā)時間(iat)、token的過期時間(exp)

// 生成的token字符串為
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1NjY3MzE4MzEsImV4cCI6MTU2NjczMTgzNn0.cZZkExNnVqBtnfQN2vtU2Z7JB0PBo1CFyC5NiOywg54

// token decoded后的數(shù)據(jù)
token data is {"foo":"bar","iat":1566731831,"exp":1566731836}

三、封裝axios

由于在使用jwt認(rèn)證的時候，客戶端向服務(wù)器發(fā)起請求的時候，都要帶上token，即要獲取到token并將其放到請求頭的Authorization字段中，服務(wù)器才能從authorization中取出token并進行校驗，所以我們必須通過攔截器去實現(xiàn)，在每次請求之前將請求進行攔截，然后添加上token，再繼續(xù)向服務(wù)器發(fā)起請求。

import axios from "axios";
class Request {
  constructor() {
    this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/'; // 設(shè)置請求baseURL
    this.timeout = 2000; // 設(shè)置請求超時時間
  }
  request(config){// 這里的config是請求的時候傳遞的參數(shù)配置對象，比如url、method、data等
    const instance = axios.create({ // 創(chuàng)建axios實例
      baseURL: this.baseURL,
      timeout: this.timeout,
    });
    // 設(shè)置攔截器
    instance.interceptors.request.use((config) => { // 請求攔截之后就是要使用這個config, config表示整個請求對象
      config.headers.Authorization = localStorage.getItem('token'); // 將token從localStorage中取出并添加到請求頭的Authorization字段上
      return config; // 返回請求對象，繼續(xù)向服務(wù)器發(fā)起請求
    }, err => Promise.reject(err));
    // 設(shè)置響應(yīng)攔截器
    instance.interceptors.response.use(res => res.data, err => Promise.reject(err));
  
    return instance(config);
  }
}
export default new Request();

四、通過路由鉤子進行登錄校驗

我們需要在路由跳轉(zhuǎn)之前，進行登錄校驗，即校驗登錄的token是否已經(jīng)過期，如果token沒有失效，則可以繼續(xù)訪問頁面；如果token已經(jīng)失效，那么檢查一下所訪問的頁面是否需要登錄才能訪問，如果是需要登錄后才能訪問，那么跳轉(zhuǎn)到登錄頁面；如果是不需要登錄也能訪問的頁面則繼續(xù)訪問；

const whiteList = ["/"]; // 定義一個白名單列表
router.beforeEach(async (to, from, next) => {
 if (whiteList.includes(to.path)) { // 如果是訪問的白名單中的頁面
  return next(); // 不需要校驗，直接返回繼續(xù)訪問該頁面
 }
 const isTokenAvailable = await store.dispatch('validate'); // 校驗token是否失效
 if (isTokenAvailable) { // 如果token未失效
  if(to.path === "/login") { // 如果訪問的是login頁面，則回到首頁
   next("/");
  } else { // 如果訪問的不是login頁面，則繼續(xù)訪問當(dāng)前要訪問的頁面
   next();
  }
 } else { // 如果token失效了
  const needLogin = to.matched.some(item => item.meta.needLogin); // 檢測要訪問的頁面是否需要登錄才能訪問
  if(needLogin) { // 如果訪問的頁面是需要登錄的
   next("/login"); // 跳轉(zhuǎn)到登錄頁面
  } else { // 如果訪問的頁面是不需要登錄的，則直接繼續(xù)訪問
   next();
  }
 }
});

上面item.meta.needLogin，這個needLogin是在router中進行自定義配置的，在配置路由的時候，允許通過meta屬性配置一些自定義的元數(shù)據(jù)，如下所示:

export default new Router({
 routes: [
  {
   path: '/profile',
   name: 'profile',
   component: Profile,
   meta: {needLogin: true}
  }
 ]
})

關(guān)于怎么在Vue路由中實現(xiàn)JWT身份認(rèn)證問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。