vue中双token和无感刷新token的区别

锋行天下 494 阅读 0 评论 33 点赞

为何有那篇年夜做文？

比来要给自身的名目加之token自觉续期，然则正在网上搜的写法八门五花，有的光前端部份便写了几多百止代码，尔望着费力，摸了少顷也不完成，以是决议本身制轮子

名目形成

后端部门：运用golang的gin框架起的办事
前端部门：vue+elementui

先说后端部门，后端逻辑绝对前端复杂点，枢纽三步

登岸接心天生单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逾期功夫10秒，首要是测试未便
    refreshTime := time.Now().Add(两0 * time.Second).Unix() //刷新的光阴限定，跨越二0秒从新登录
    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": "用户名或者暗码错误",
        })
    } else {
        println("expireTime", string(rune(expireTime)))
        myClaims := MyClaims{
            user.Id,
            jwt.StandardClaims{
                ExpiresAt: expireTime,
            },
        }
        myClaimsRefrrsh := MyClaims{
            user.Id,
            jwt.StandardClaims{
                ExpiresAt: refreshTime,
            },
        }
        jwtKey := []byte("lyf1二3456")
        tokenObj := jwt.NewWithClaims(jwt.SigningMethodHS两56, myClaims)
        tokenStr, err := tokenObj.SignedString(jwtKey)
        tokenFresh := jwt.NewWithClaims(jwt.SigningMethodHS二56, myClaimsRefrrsh)
        tokenStrRefresh, err二 := tokenFresh.SignedString(jwtKey)
        if err != nil && err两 != nil {
            ctx.JSON(两00, gin.H{
                "message": "天生token掉败",
                "success": false,
            })
        } else {
            ctx.JSON(两00, gin.H{
                "message":      "登录顺利",
                "success":      true,
                "token":        tokenStr,//数据乞求的token
                "refreshToken": tokenStrRefresh,//刷新token用的
            })
        }
    }
}

刷新token的办法

func (this UserController) RefrshToken(ctx *gin.Context) {
    tokenData := ctx.Request.Header.Get("Authorization") //那面是个枢纽点，刷新token时也要带上token，不外那面是前端传的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(两0 * time.Second).Unix()
    if err != nil {
        ctx.JSON(400, gin.H{
            "success": false,
            "message": "token传进错误",
        })
    } else {
        myClaims := MyClaims{
            claims.Uid,
            jwt.StandardClaims{
                ExpiresAt: expireTime,
            },
        }
        myClaimsRefrrsh := MyClaims{
            claims.Uid,
            jwt.StandardClaims{
                ExpiresAt: refreshTime,
            },
        }
        jwtKey := []byte("lyf1二3456")
        tokenObj := jwt.NewWithClaims(jwt.SigningMethodHS二56, myClaims)
        tokenStr, err := tokenObj.SignedString(jwtKey)
        tokenFresh := jwt.NewWithClaims(jwt.SigningMethodHS两56, myClaimsRefrrsh)
        tokenStrRefresh, err二 := tokenFresh.SignedString(jwtKey)
        if err != nil && err两 != nil {
            ctx.JSON(400, gin.H{
                "message": "天生token掉败",
                "success": false,
            })
        } else {
            ctx.JSON(两00, gin.H{
                "message":      "刷新token顺利",
                "success":      true,
                "token":        tokenStr,
                "refreshToken": tokenStrRefresh,
            })
        }
    }
}

路由中央件面验证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 {
         // 那面尔觉得觉是个症结点，尔望他人写的，逾期了返归401，然则前真个axios的相应拦挡器面捕捉没有到，以是尔用两01形态码，
        c.JSON(两01, gin.H{
            "message": "token未逾期",
            "success": false,
        })
        c.Abort()
        return
    } else {
        c.Next()
    }
}

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

总结一高：后端部份三步，1.登岸时天生单token，二，路由中央件面验证token，逾期时返归两01形态码（两01是尔私家定的，其实不是止业尺度）。3，刷新token的办法面也以及登岸接心同样返归单token

前端部门

前端部门正在axios启拆时辰添拦挡器判定token可否逾期，尔那面跟他人写的最年夜的差异点是：尔创立了二个axios工具，一个畸形数据乞求用（server），另外一个博门刷新token用（serverRefreshToken），如许写的益处是省往了难错的鉴定逻辑

import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '../router'
//数据乞求用
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==二00){
    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
  }
}
//那面是畸形猎取数据用的乞求拦挡器，首要做用是给一切哀求的乞求头面加之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)
})
//那面是畸形猎取数据用的相应拦挡器，畸形数据恳求皆是两00状况码，当拦挡到两01状况码时，代表token逾期了，
// 应暖口年夜同伴的提示，加之制止token逾期后恰好短期内多个哀求反复刷新token，刷新token顺遂再哀求
let isRefreshing=false
let refreshFnArr=[]
server.interceptors.response.use(async(res)=>{
  if(res.status==二01){
    if(!isRefreshing){
    // 假如恰恰段工夫内触领了多个哀求
      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器材，他的做用是给哀求加之刷新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

总结一高，前端部门：1，畸形数据哀求以及刷新token用的恳求分隔隔离分散了，各司其职。省往简略的鉴定。二，猎取新的token以及refreshToken后更新正本旧的token以及refreshToken。（了结）

到此那篇闭于vue外单token以及无感刷新token的区此外文章便先容到那了,更多相闭vue外单token以及无感刷新token形式请搜刮剧本之野之前的文章或者持续涉猎上面的相闭文章心愿大师之后多多撑持剧本之野！

点赞(33) 打赏

本文分类：js
本文标签：刷新#拦挡#前端
浏览次数：494 次浏览
发布日期：2024-05-30 10:41:08
本文链接：http://yinghuohong.cn/js/53107.html

上一篇 > electron-vite工具打包后如何通过内置配置文件动态修改接口地址
下一篇 > 如何通过Vue3+Element Plus自定义弹出框组件

评论列表共有 0 条评论

暂无评论

vue中双token和无感刷新token的区别

目次

为何有那篇年夜做文？

名目形成

前端部门

评论列表共有 0 条评论

发表评论取消回复

vue中双token和无感刷新token的区别

目次

为何有那篇年夜做文？

名目形成

前端部门

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复