脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端在WebSocket加入Token

前端在WebSocket中加入Token的解决方式

 更新时间：2023年10月10日 09:57:30   作者：写BUG的牛  
这篇文章主要给大家介绍了关于前端在WebSocket中加入Token的解决方式,文中提供了3种解决方法,对大家学习或者使用WebSocket具有一定的参考借鉴价值,需要的朋友可以参考下

背景：

相信开发者你们已经遇到或者尝试过给WebSocket通过API去尝试修改请求头了

部分搭档后端同事甚至希望前端做到的是在Request Headers中authorization：Token

注意：JavaScript websocketAPI中并没有修改请求头的方法。

你只能另谋其路了

解决方式1：请求地址中带参数

const ws =  new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}?${token}/websocket`)

解决方式2:send发送数据

const  ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}:${url}/websocket`)
ws.onopen=()=>{ws.send(token)}

解决方式 3:利用Sec-WebSocket-Protocol传递token

const url = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}/websocket`
const token = localStorage.getItem('token')
const ws = new WebSocket(url, [token])

如果你出现这样的报错

ws.ts:68 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The subprotocol '"Token"' is invalid.

请处理一下你的Token 

const ws = new WebSocket(url, [JSON.parse(token)])

注意：在后端响应的时候也需要带上Token响应

当然如果你还有其他参数需要在头部传递，你也可以

const ws = new WebSocket(url, ['v10.stomp', 'v11.stomp', token])

题外话：如果后端强调需要你在Request Headers中authorization：Token挂载，你告诉他做不到即可。

总结

到此这篇关于前端在WebSocket中加入Token的解决方式的文章就介绍到这了,更多相关前端在WebSocket加入Token内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

最新评论