Gin框架之Session的使用(详解)
前言
本文主要介绍 go开源框架gin 是如何使用session的。以及前端 vue3 + axios@0.27 是如何配合session一起使用的
主要介绍内容包括这些:
- session的基本原理
- gin配置session
- axios 如何设置携带cookie (chrome版本 < 80)
- axios 如何在跨域请求时携带cookie(chrome版本 < 80)
- chrome浏览器版本 >= 80 时,axios 不携带cookie的解决方案
- session的一些基本配置操作
- session的Flashes讲解
正文
session的基本原理
http协议是无状态的,就是说你在请求服务器同时,张三也在请求服务器,这时候服务器是不知道哪个请求是你,哪个请求张三(除非你们携带了一些识别字段,不过这属于业务层内容,不在讨论范围,我们单说http协议)。
为了让服务器知道哪个请求时你的,哪个是张三的。这时候就有了session。
session和cookie是不分家的。我们每次说到session,其实默认就是要使用cookie了。
我们举例说明一下什么是session:
你要去逛澡堂,刚进门来到服务台时你是没有开储物柜的钥匙的。当你交钱了,服务台就给你一把储物柜的钥匙,这时储物柜就和你的钥匙绑定了。你去游泳、搓澡,你一直会把钥匙带在身上。这时候你不管什么时候去服务台,只要你拿着钥匙,就会认识你,你拿着钥匙可以随便的到储物柜中拿取自己的东西。你要离开时,把钥匙柜服务台就可以了。
在程序里是怎么实现上面的过程的呢?
服务器就是服务台,储物柜就是session仓库,钥匙就是我们的凭证。携带钥匙其实就是cookie传输。
第一次登录,服务器给客户端颁发一个唯一的sessionId, 并通过http的响应头返回。客户端(浏览器)发现返回的数据中有cookie数据就把这个cookie数据存放到内存。下次再发送http请求时,把内存中的cookie数据再塞到http请求头中,一并发给服务器,服务器在解析请求时,发现请求头中有cookie,就开始识别cookie中的sessionId,拿到sessionId,我们就知道这个请求时由哪个客户端发送来的了。
gin配置session
gin框架在处理session时有专门的中间件,我们可以直接使用。
中间件: github.com/gin-contrib/sessions
, 我们直接安装依赖: go get github.com/gin-contrib/sessions
即可引入使用
sessions使用教程
我们参考官网案例:
package main
import (
// 导入session包
"github.com/gin-contrib/sessions"
// 导入session存储引擎
"github.com/gin-contrib/sessions/cookie"
// 导入gin框架包
"github.com/gin-gonic/gin"
)
func main() {
r := gin.Default()
// 创建基于cookie的存储引擎,shuiche 参数是用于加密的密钥,可以随便填写
store := cookie.NewStore([]byte("shuiche"))
// 设置session中间件,参数mysession,指的是session的名字,也是cookie的名字
// store是前面创建的存储引擎
r.Use(sessions.Sessions("mysession", store))
r.GET("/test", func(c *gin.Context) {
// 初始化session对象
session := sessions.Default(c)
// 通过session.Get读取session值
// session是键值对格式数据,因此需要通过key查询数据
if session.Get("hello") != "world" {
// 设置session数据,()
session.Set("hello", "world")
// 删除session数据
session.Delete("tizi365")
// 保存session数据
session.Save()
// 删除整个session
// session.Clear()
}
c.JSON(200, gin.H{"hello": session.Get("hello")})
})
r.Run(":8000")
}
使用sessions 中间件注意要点:
- session 仓库其实就是一个 map[interface]interface 对象,所有 session可以存储任意数据
- session 使用的编解码器是自带的gob,所以存储类似: struct、map 这些对象时需要先注册对象,不然会报错
gob: type not registered for...
- session 存储引擎支持: cookie、内存、mongodb、redis、postgres、memstore、memcached 以及 gorm 支持的各类数据库(mysql、sqlite)
- session 在创建时有一个配置项,可以配置session过期时间、cookie、domain、secure、path等参数
- 调用 session 方法: Set()、 Delete()、 Clear()、方法后,必须调用一次 Save() 方法。否则session数据不会更新
gob注册案例
type User struct{
Name string
}
gob.Register(User{})
session配置项案例
// store 就是前面创建的存储引擎
store.Options(sessions.Options{
Secure: true,
SameSite: 4,
Path: "/",
MaxAge: m.MaxAge,
})
axios 如何设置携带cookie (chrome版本 < 80)
axios请求默认是不携带 Cookie 的,如果需要携带 Cookie 前端需要配置
// 全局配置
axios.defaults.withCredentials = true
// 实例配置
const service = axios.create({
baseURL: process.env.BASE_API,
timeout: 5000,
withCredentials: true // 配置项
})
// 单个路由配置
axios.get('/test', {
withCredentials: true
})
axios 如何在跨域请求时携带cookie(chrome版本 < 80)
涉及到跨域,我们就要想到要在服务器端做处理
我们给服务器开启 CORS 跨域,我们给gin添加 CORS 中间件
跨域配置中间件
func(c *gin.Context) {
method := c.Request.Method
origin := c.GetHeader("Origin")
c.Header("Access-Control-Allow-Origin", origin) // 注意这一行,不能配置为通配符“*”号
c.Header("Access-Control-Allow-Credentials", "true") // 注意这一行,必须设定为 true
c.Header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers,Cookie, Origin, X-Requested-With, Content-Type, Accept, Authorization, Token, Timestamp, UserId") // 我们自定义的header字段都需要在这里声明
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT")
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type,cache-control")
// 放行所有OPTIONS方法
if method == "OPTIONS" {
//c.AbortWithStatus(http.StatusNoContent)
c.AbortWithStatus(http.StatusOK)
}
// 处理请求
c.Next()
}
chrome浏览器版本 >= 80 时,axios 不携带cookie的解决方案
如果我们的chrome浏览器版本高于80,我们会发现按照上面两步配置的cookie还是无法生效,这是因为chrome为了增加安全性修改了携带cookie的方式。
这里分两种情况讲解:
线上情况
- 设置: samesite: none,也就是session的store在设定options时设定的字段配置为:SameSite: 4,(这里4 就代表none)。
- secure 配置为 true
- 服务端开启https (必须)
1、2 配置案例查看 上面的 session配置项案例
开发环境
用127.0.0.1地址或者localhost地址测试
优化方案
我们可以利用cookie机制发送sessionId。目前我正在考虑使用自定义header字段携带sessionId,基本逻辑:
前端:请求返回后,判断是否有我们命名的session 名称的cookie,(就是创建session时的自定义名称:mysession),如果有将值存储到内存。 发送请求时,将存储的session值添加到http请求的header中。
服务端:将校验session的中间件中的获取session 修改为从header中获取。
因为chrome>80的浏览器是发不出去cookie,不是收不到cookie。我们就不用浏览器的字段携带cookie机制,搞成手动携带cookie
session的一些基本配置操作
设置session过期时间
设置:store.Options(sessions.Options{MaxAge: 86400*30})
session 刷新超时时间
基本思路:
每次获取到请求后, 我们将该用户的session重新赋值,并返回给客户端,客户端下次请求时携带新的session请求。
当前 session 用户数量
有时候我们系统需要统计当前在线用户数量,这是我们就不能用cookie或者内存存储session了,需要用数据库存储。
我们把session存储到数据库后,通过查询当前没过期session数量就可以确定在线用户数
注销session
我们在退出登录时需要删掉session,只需要调用 sesssion的 Delete()方法即可, 记得调用 Save方法保存操作
vue3 浏览器在关闭时发送退出登录请求
在app.vue 文件中添加这样的代码, 其中:gapTime <= 12
中的 12 是经验值。vue文件使用 setup语法糖模式
onMounted(() => {
window.addEventListener('beforeunload', beforeunloadHandler)
window.addEventListener('unload', unloadHandler)
})
function beforeunloadHandler (e) {
beforeUnloadTime = new Date().getTime()
}
function unloadHandler (e) {
gapTime = new Date().getTime() - beforeUnloadTime
// 判断是窗口关闭还是刷新
console.log('====gapTime=======', gapTime)
if (gapTime <= 12) {
// 如果是登录状态,关闭窗口前,移除用户
navigator.sendBeacon(`/user/logout`, data) // 这里data是请求的参数。一个字符串,具体查看navigator.sendBeacon 使用方法
}
debugger
}
session的Flashes讲解
我们在看 session库 源码时会发现还有两个函数:Flashes()
和 AddFlash
。简单说一下这两个函数作用
Flash既闪存,不是我们浏览器里的那个flash插件,flash主要是存储一下临时数据。
- 我们调用 AddFlash时,会往flash里存储 一个键值对。
- 当我们调用 Flashs 读取了 闪存内容后,这个闪存数据就被删除了。(记得调用 Save()方法生效)
后记
本篇博文耗费了比较大的精力才研究透彻,如果对你有帮助,可以点个推荐,当然想请我喝杯可乐我也会很开心的哦