WebSocket 即时通讯前后端设计和基于token的鉴权

我的项目中使用的websocket 即时通讯一直没有加权限验证功能,就是简单的连接后发消息,但是最近面试的时候有人问我websocket如何鉴权,现在把这个漏洞补上

这是后端代码 go语言

路由代码

go 复制代码
defaultRoutes.GET("/ws", func(ctx *gin.Context) {
        t := ctx.Query("token")
        token, _, err := middlewares.ParseToken(t)
        if err != nil || !token.Valid {
                ctx.JSON(400, gin.H{
                        "message": "token无效",
                })
        } else {
                controllers.UserController{}.WS(ctx.Writer, ctx.Request)
        }

})

websocket连接

go 复制代码
var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
            return true
    },
}
var conns []*websocket.Conn
go 复制代码
func (this UserController) WS(w http.ResponseWriter, r *http.Request) {
    c, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
            println("upgrade错误:", err)
            return
    }
    defer c.Close()
    conns = append(conns, c)
    for {
            _, _, err := c.ReadMessage()
            if err != nil {
                    println("read:", err)
                    break
            }
    }
}
下面是前端代码
ini 复制代码
let token=sessionStorage.getItem("token")
const env = process.env.NODE_ENV
//token加载url里个人感觉最合适的方案
const url = env == 'development' ? "ws://localhost:8088/ws?token=" + token : "ws://114.116.249.103:8088/ws?token=" + token
const websocket = new WebSocket(url)
let socketState = ref(true)
websocket.onopen = (evt) => {
  console.log("链接成功")
  socketState.value = true
}
websocket.onmessage = (evt) => {
    //这里是判断消息类型,自定义功能
  if (evt.data == "xxx1") {
    refreshChartJL()
  } else if (evt.data == "xxx2") {
    refreshChartMusic()
  }
}
websocket.onclose = () => {
  console.log("链接关闭")
  socketState.value = false
}
相关推荐
这里有鱼汤几秒前
给你的DeepSeek装上实时行情,让他帮你炒股
后端·python·mcp
满分观察网友z3 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
咖啡啡不加糖3 分钟前
暴力破解漏洞与命令执行漏洞
java·后端·web安全
满分观察网友z5 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
风象南6 分钟前
SpringBoot敏感配置项加密与解密实战
java·spring boot·后端
西西木科技丨Shopify开发机构11 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙18 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1119 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆23 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
ん贤24 分钟前
RESTful风格
后端·go·restful