快捷導(dǎo)航

vue中雙token和無(wú)感刷新token的區(qū)別

更新時(shí)間：2024年05月12日 08:36:07 作者：鋒行天下

本文主要介紹了vue中雙token和無(wú)感刷新token的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

為什么有這篇小作文？

最近要給自己的項(xiàng)目加上token自動(dòng)續(xù)期，但是在網(wǎng)上搜的寫法五花八門，有的光前端部分就寫了幾百行代碼，我看著費(fèi)勁，摸了半天也沒(méi)有實(shí)現(xiàn)，所以決定自己造輪子

項(xiàng)目構(gòu)成

后端部分：使用golang的gin框架起的服務(wù)
前端部分：vue+elementui

先說(shuō)后端部分，后端邏輯相對(duì)前端簡(jiǎn)單點(diǎn)，關(guān)鍵三步

登陸接口生成雙token

"github.com/dgrijalva/jwt-go"

func (this UserController) DoLogin(ctx *gin.Context) {
    username := ctx.Request.FormValue("username")
    passWord := ctx.Request.FormValue("password")
    passMd5 := middlewares.CreateMD5(passWord)
    expireTime := time.Now().Add(10 * time.Second).Unix() //token過(guò)期時(shí)間10秒，主要是測(cè)試方便
    refreshTime := time.Now().Add(20 * time.Second).Unix() //刷新的時(shí)間限制，超過(guò)20秒重新登錄
    user := []modules.User{}
    err := modules.DB.Model(&modules.User{}).Where("username = ? AND password = ?", username, passMd5).Find(&user).Error
    if err != nil || len(user) == 0 {
        ctx.JSON(400, gin.H{
            "success": false,
            "message": "用戶名或密碼錯(cuò)誤",
        })
    } else {
        println("expireTime", string(rune(expireTime)))
        myClaims := MyClaims{
            user.Id,
            jwt.StandardClaims{
                ExpiresAt: expireTime,
            },
        }
        myClaimsRefrrsh := MyClaims{
            user.Id,
            jwt.StandardClaims{
                ExpiresAt: refreshTime,
            },
        }
        jwtKey := []byte("lyf123456")
        tokenObj := jwt.NewWithClaims(jwt.SigningMethodHS256, myClaims)
        tokenStr, err := tokenObj.SignedString(jwtKey)
        tokenFresh := jwt.NewWithClaims(jwt.SigningMethodHS256, myClaimsRefrrsh)
        tokenStrRefresh, err2 := tokenFresh.SignedString(jwtKey)
        if err != nil && err2 != nil {
            ctx.JSON(200, gin.H{
                "message": "生成token失敗",
                "success": false,
            })
        } else {
            ctx.JSON(200, gin.H{
                "message":      "登錄成功",
                "success":      true,
                "token":        tokenStr,//數(shù)據(jù)請(qǐng)求的token
                "refreshToken": tokenStrRefresh,//刷新token用的
            })
        }
    }
}

刷新token的方法

func (this UserController) RefrshToken(ctx *gin.Context) {
    tokenData := ctx.Request.Header.Get("Authorization") //這里是個(gè)關(guān)鍵點(diǎn)，刷新token時(shí)也要帶上token，不過(guò)這里是前端傳的refreshToken
    if tokenData == "" {
        ctx.JSON(401, gin.H{
            "message": "token為空",
            "success": false,
        })
        ctx.Abort()
        return
    }
    tokenStr := strings.Split(tokenData, " ")[1]
    _, claims, err := middlewares.ParseToken(tokenStr)
    expireTime := time.Now().Add(10 * time.Second).Unix()
    refreshTime := time.Now().Add(20 * time.Second).Unix()
    if err != nil {
        ctx.JSON(400, gin.H{
            "success": false,
            "message": "token傳入錯(cuò)誤",
        })
    } else {
        myClaims := MyClaims{
            claims.Uid,
            jwt.StandardClaims{
                ExpiresAt: expireTime,
            },
        }
        myClaimsRefrrsh := MyClaims{
            claims.Uid,
            jwt.StandardClaims{
                ExpiresAt: refreshTime,
            },
        }
        jwtKey := []byte("lyf123456")
        tokenObj := jwt.NewWithClaims(jwt.SigningMethodHS256, myClaims)
        tokenStr, err := tokenObj.SignedString(jwtKey)
        tokenFresh := jwt.NewWithClaims(jwt.SigningMethodHS256, myClaimsRefrrsh)
        tokenStrRefresh, err2 := tokenFresh.SignedString(jwtKey)
        if err != nil && err2 != nil {
            ctx.JSON(400, gin.H{
                "message": "生成token失敗",
                "success": false,
            })
        } else {
            ctx.JSON(200, gin.H{
                "message":      "刷新token成功",
                "success":      true,
                "token":        tokenStr,
                "refreshToken": tokenStrRefresh,
            })
        }
    }
}

路由中間件里驗(yàn)證token

package middlewares

import (
    "strings"

    "github.com/dgrijalva/jwt-go"
    "github.com/gin-gonic/gin"
)

type MyClaims struct {
    Uid int
    jwt.StandardClaims
}

func AuthMiddleWare(c *gin.Context) {
    tokenData := c.Request.Header.Get("Authorization")
    if tokenData == "" {
        c.JSON(401, gin.H{
            "message": "token為空",
            "success": false,
        })
        c.Abort()
        return
    }
    tokenStr := strings.Split(tokenData, " ")[1]
    token, _, err := ParseToken(tokenStr)
    if err != nil || !token.Valid {
         // 這里我感覺(jué)覺(jué)是個(gè)關(guān)鍵點(diǎn)，我看別人寫的，過(guò)期了返回401，但是前端的axios的響應(yīng)攔截器里捕獲不到，所以我用201狀態(tài)碼，
        c.JSON(201, gin.H{
            "message": "token已過(guò)期",
            "success": false,
        })
        c.Abort()
        return
    } else {
        c.Next()
    }
}

func ParseToken(tokenStr string) (*jwt.Token, *MyClaims, error) {
    jwtKey := []byte("lyf123456")
    // 解析token
    myClaims := &MyClaims{}
    token, err := jwt.ParseWithClaims(tokenStr, myClaims, func(token *jwt.Token) (interface{}, error) {
        return jwtKey, nil
    })
    return token, myClaims, err
}

總結(jié)一下：后端部分三步，1.登陸時(shí)生成雙token，2，路由中間件里驗(yàn)證token，過(guò)期時(shí)返回201狀態(tài)碼（201是我私人定的，并不是行業(yè)標(biāo)準(zhǔn)）。3，刷新token的方法里也和登陸接口一樣返回雙token

前端部分

前端部分在axios封裝時(shí)候加攔截器判斷token是否過(guò)期，我這里跟別人寫的最大的不同點(diǎn)是：我創(chuàng)建了兩個(gè)axios對(duì)象，一個(gè)正常數(shù)據(jù)請(qǐng)求用（server），另一個(gè)專門刷新token用（serverRefreshToken），這樣寫的好處是省去了易錯(cuò)的判斷邏輯

import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '../router'
//數(shù)據(jù)請(qǐng)求用
const server=axios.create({
  baseURL:'/shopApi',
  timeout:5000
})
// 刷新token專用
const serverRefreshToken=axios.create({
  baseURL:'/shopApi',
  timeout:5000
})
//獲取新token的方法
async function getNewToken(){
  let res=await serverRefreshToken.request({
    url:`/admin/refresh`,
    method:"post",
  })
  if(res.status==200){
    sessionStorage.setItem("token",res.data.token)
    sessionStorage.setItem("refreshToken",res.data.refreshToken)
    return true
  }else{
    ElMessage.error(res.data.message)
    router.push('/login')
    return false
  }
}
//這里是正常獲取數(shù)據(jù)用的請(qǐng)求攔截器，主要作用是給所有請(qǐng)求的請(qǐng)求頭里加上token
server.interceptors.request.use(config=>{
  let token=""
  token=sessionStorage.getItem("token")
  if(token){
    config.headers.Authorization="Bearer "+token
  }
  return config
},error=>{
  Promise.reject(error)
})
//這里是正常獲取數(shù)據(jù)用的響應(yīng)攔截器，正常數(shù)據(jù)請(qǐng)求都是200狀態(tài)碼，當(dāng)攔截到201狀態(tài)碼時(shí)，代表token過(guò)期了，
// 應(yīng)熱心小伙伴的提醒，加上防止token過(guò)期后正好短時(shí)間內(nèi)多個(gè)請(qǐng)求重復(fù)刷新token，刷新token成功再請(qǐng)求
let isRefreshing=false
let refreshFnArr=[]
server.interceptors.response.use(async(res)=>{
  if(res.status==201){
    if(!isRefreshing){
    // 如果正好段時(shí)間內(nèi)觸發(fā)了多個(gè)請(qǐng)求
      isRefreshing=true
      let bl=await getNewToken()
      if(bl){
        refreshFnArr.forEach(fn=>{
          fn()
        })
        refreshFnArr=[]
        res= await server.request(res.config)
        isRefreshing=false
      }
    }else{
      return new Promise(resolve=>{
        refreshFnArr.push(
          ()=>{
            resolve(res.config)
          }
        )
      })
    }
  }
  return res
},error=>{
  if(error.response.status==500||error.response.status==401||error.response.status==400){
    router.push('/login')
    ElMessage.error(error.response.data.message)
    Promise.reject(error)
  }
  
})
//這里是刷新token專用的axios對(duì)象，他的作用是給請(qǐng)求加上刷新token專用的refreshToken
serverRefreshToken.interceptors.request.use(config=>{
  let token=""
  token=sessionStorage.getItem("refreshToken")
  if(token){
    config.headers.Authorization="Bearer "+token
  }
  return config
},error=>{
  Promise.reject(error)
})
export default server

總結(jié)一下，前端部分：1，正常數(shù)據(jù)請(qǐng)求和刷新token用的請(qǐng)求分開(kāi)了，各司其職。省去復(fù)雜的判斷。2，獲取新的token和refreshToken后更新原來(lái)舊的token和refreshToken。（完結(jié)）

到此這篇關(guān)于vue中雙token和無(wú)感刷新token的區(qū)別的文章就介紹到這了,更多相關(guān)vue中雙token和無(wú)感刷新token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: