怎么在vue中使用egg和jwt實現一個登錄驗證功能

怎么在vue中使用egg和jwt實現一個登錄驗證功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

vue前端main.js中：

import axios from 'axios';
import cookie from './public/util';
router.beforeEach((to, from, next) => {
 console.log('路由攔截')
 //判斷要去的路由有沒有requiresAuth
 if (to.meta.requiresAuth) {
  let token = cookie.getCookie('token');
  if (token) {
   next();
  } else {
   next({
    path: '/login'
   });
  }
 } else {
  next(); //如果無需token,那么隨它去吧
 }
})
// http request 攔截器
axios.interceptors.request.use(
 config => {
  let token = cookie.getCookie('token');
  console.log(token)
  if (token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
   config.headers.authorization = `token ${token}`;
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 });
 
// http response 攔截器
axios.interceptors.response.use(
 response => {
  return response;
 },
 error => {
  if (error.response) {
   switch (error.response.status) {
    case 401:
     // 返回 401 清除token信息并跳轉到登錄頁面
     router.replace({
      path: '/login'
     });
   }
  }
  return Promise.reject(error.response.data);  // 返回接口返回的錯誤信息
 });
Vue.prototype.$http = axios;

其中util.js中我封裝了操作cookie的方法

//獲取cookie、
function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
   return (arr[2]);
  else
   return null;
  }
  
  //設置cookie,增加到vue實例方便全局調用
function setCookie (c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
  };
  
  //刪除cookie
function delCookie (name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
   document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  };
  module.exports = {
  getCookie:getCookie,
  setCookie:setCookie,
  delCookie:delCookie
  }

路由中需要登錄才能訪問的頁面，應：

path:'/admin/manager',component:Page,name:'管理系統首頁',meta:{requiresAuth:true}

如果需要獲取token中的信息則：

let token = cookie.getCookie('token');
let Base64 = require('js-base64').Base64;
let str = token.split('.')[1];
let user = JSON.parse(Base64.decode(str));
console.log(user)

后端在登錄邏輯執行完后，需要給前端發放token

 let jwt = require('jsonwebtoken');
    let token = jwt.sign({
      user_id:1,
      user_name: '張三'
     }, '自定義簽名鹽值', {
      expiresIn: '60s' //時間根據自己定，具體可參考jsonwebtoken插件官方說明
     });
this.ctx.cookies.set('token', token, {maxAge:60*1000,httpOnly:false,overwrite:true,signed:false})
this.ctx.body = true;

接著是中間件：

module.exports = () => {
 const jwt = require('jsonwebtoken');
 return async function (ctx, next) {
  if (ctx.request.header['authorization']) {
   let token = ctx.request.header['authorization'].split(' ')[1];
   console.log(token)
   let decoded;
   //解碼token
   try {
    decoded = jwt.verify(token, '加簽時定義的鹽值');
   } catch (error) {
    if (error.name == 'TokenExpiredError') {
     console.log('時間到期')
     //重新發放令牌
     token = jwt.sign({
      user_id: 1,
      user_name: '張三'
     }, 'sinner77', {
      expiresIn: '60s' //過期時間設置為60妙。那么decode這個token的時候得到的過期時間為 : 創建token的時間 +　設置的值
     });
     ctx.cookies.set('token', token, {
      maxAge: 60 * 1000,
      httpOnly: false,
      overwrite: true,
      signed: false
     });
    } else {
     ctx.status = 401;
     ctx.body = {
      message: 'token失效'
     }
     return;
    }
   }
   //重置cookie時間
   ctx.cookies.set('token', token, {
    maxAge: 60 * 1000,
    httpOnly: false,
    overwrite: true,
    signed: false
   });
   await next();
  } else {
   ctx.status = 401;
   ctx.body = {
    message: '沒有token'
   }
   return;
  }
 }
};

最后在需要登錄才可訪問的資源路由上使用該中間件，如:

 const checktoken = app.middleware.checktoken();
 router.get('/test',checktoken,controller.util.test);

看完上述內容，你們掌握怎么在vue中使用egg和jwt實現一個登錄驗證功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！