加载中...

Gin框架之Session的使用(详解)

前言

本文主要介绍 go开源框架gin 是如何使用session的。以及前端 vue3 + axios@0.27 是如何配合session一起使用的

主要介绍内容包括这些:

  1. session的基本原理
  2. gin配置session
  3. axios 如何设置携带cookie (chrome版本 < 80)
  4. axios 如何在跨域请求时携带cookie(chrome版本 < 80)
  5. chrome浏览器版本 >= 80 时,axios 不携带cookie的解决方案
  6. session的一些基本配置操作
  7. 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 中间件注意要点:

  1. session 仓库其实就是一个 map[interface]interface 对象,所有 session可以存储任意数据
  2. session 使用的编解码器是自带的gob,所以存储类似: struct、map 这些对象时需要先注册对象,不然会报错 gob: type not registered for...
  3. session 存储引擎支持: cookie、内存、mongodb、redis、postgres、memstore、memcached 以及 gorm 支持的各类数据库(mysql、sqlite)
  4. session 在创建时有一个配置项,可以配置session过期时间、cookie、domain、secure、path等参数
  5. 调用 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的方式。

这里分两种情况讲解:

线上情况

  1. 设置: samesite: none,也就是session的store在设定options时设定的字段配置为:SameSite: 4,(这里4 就代表none)。
  2. secure 配置为 true
  3. 服务端开启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主要是存储一下临时数据。

  1. 我们调用 AddFlash时,会往flash里存储 一个键值对。
  2. 当我们调用 Flashs 读取了 闪存内容后,这个闪存数据就被删除了。(记得调用 Save()方法生效)

后记

本篇博文耗费了比较大的精力才研究透彻,如果对你有帮助,可以点个推荐,当然想请我喝杯可乐我也会很开心的哦

posted @ 2022-08-04 11:20  水车  阅读(5553)  评论(0编辑  收藏  举报