双token和无感刷新token（简单写法，一文说明白，不墨迹）

锋行天下2024-02-22 9:32

为什么有这篇小作文？

最近要给自己的项目加上token自动续期，但是在网上搜的写法五花八门，有的光前端部分就写了几百行代码，我看着费劲，摸了半天也没有实现，所以决定自己造轮子

项目构成

  • 后端部分：使用golang的gin框架起的服务
  • 前端部分：vue+elementui

先说后端部分，后端逻辑相对前端简单点，关键两步

  1. 登陆接口生成双token
arduino 复制代码 
"github.com/dgrijalva/jwt-go"
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(20 * time.Second).Unix() //刷新的时间限制，超过20秒重新登录
	user := modules.User{}
	err := modules.DB.Model(&modules.User{}).Where("username = ? AND password = ?", username, passMd5).Find(&user).Error
	if err != nil {
		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("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,//数据请求的token
				"refreshToken": tokenStrRefresh,//刷新token用的
			})
		}
	}
}
  1. 刷新token的方法
go 复制代码 
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(20 * 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("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,
			})
		}
	}
}
  1. 路由中间件里验证token
go 复制代码 
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的响应拦截器里捕获不到，所以我用201状态码，
		c.JSON(201, gin.H{
			"message": "token已过期",
			"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
}

总结一下：后端部分三步，1.登陆时生成双token，2，路由中间件里验证token，过期时返回201状态码（201是我私人定的，并不是行业标准）。3，刷新token的方法里也和登陆接口一样返回双token

前端部分

前端部分在axios封装时候加拦截器判断token是否过期，我这里跟别人写的最大的不同点是：我创建了两个axios对象，一个正常数据请求用（server），另一个专门刷新token用（serverRefreshToken），这样写的好处是省去了易错的判断逻辑

javascript 复制代码 
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==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
  }
}
//这里是正常获取数据用的请求拦截器，主要作用是给所有请求的请求头里加上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)
})
//这里是正常获取数据用的响应拦截器，正常数据请求都是200状态码，当拦截到201状态码时，代表token过期了，
server.interceptors.response.use(async(res)=>{
  if(res.status==201){
  //获取新token
    let bl=await getNewToken()
    if(bl){
    //获取成功新token之后，把刚才token过期拦截到的请求重新发一遍，获取到数据之后把res覆盖掉
    //这里是个关键点，下边这行代码里的第二个res是token过期后被拦截的那个请求，config里是该请求的详细信息，重新请求后返回的是第一个res，把失败的res覆盖掉，这里有点绕，文字不好表达，
      res=await server.request(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用的请求分开了，各司其职。省去复杂的判断。2，获取新的token和refreshToken后更新原来旧的token和refreshToken。（完结）

相关推荐
咖啡八杯4 小时前
GoF设计模式——策略模式
java·后端·spring·设计模式
lizhongxuan5 小时前
AI Agent 上下文压缩利器 Headroom
后端
kyriewen6 小时前
别再 console.log 了：5 个 Chrome DevTools 调试技巧，用过就回不去了
前端·javascript·面试
Csvn7 小时前
SSH 远程管理与安全加固 — 运维的守门之道
后端
IT_陈寒7 小时前
Python搞不定字符串编码？这破玩意坑我两小时！
前端·人工智能·后端
DigitalOcean9 小时前
Laravel 开发者已在 DigitalOcean 上开通超过 10 万台服务器
前端·laravel
星始流年9 小时前
从 Tool 到 Skill——基于 LangChain 的服务端Skill实现
前端·langchain·agent
菜鸟谢9 小时前
Rust 智能指针完整详解
后端
李惟9 小时前
开源本地通信库，纯客户端 RPC，像聊天一样通信
前端
YAwu119 小时前
深入解析 React 炫彩鼠标跟随标题组件：从坐标定位到动画性能
前端·react.js
热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？03【AI】2026 年具身智能模型和世界模型总结042026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf05GitHub 镜像站点06Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析07AI一周事件 · 2026-06-03 至 2026-06-0908AI科技热点日报 | 2026年6月1日09Codex 下载安装指南：Windows 和 macOS 官方版下载10【解构】DeepSeek V4 发布：技术报告深度解读 + 横向对比六大开源模型，我们的判断是……