前端在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了ElementPlus Tag标签用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了js html制作简单日历的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
JavaScript使用localStorage判断设置值是否过期
本文主要介绍了JavaScript使用localStorage判断设置值是否过期，通过设置过期时间，我们可以使用 setItemWithExpiration 函数将数据存储到 localStorage 中，并使用 getItemWithExpiration 函数获取数据并检查是否过期，感兴趣的可以了解一下2023-05-05
这篇文章主要介绍了前端JavaScript跳转页面的几种方法以及区别,分别是window.location.href、window.location.assign()、window.location.replace()、window.location.reload()、window.location.hash、window.open()和document.location其中方法,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了微信小程序手机号码验证功能的实例代码及微信小程序正则判断手机号的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
html 锁定页面(js遮罩层弹出div效果)，需要的朋友可以参考下。2009-10-10
最近有个需求就是要用canvas画个分享的海报,所以这里总结下,这篇文章主要给大家介绍了关于uniapp中canvas绘制图片内容空白报错的原因及解决方法,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了JavaScript中的this指向绑定规则及箭头韩硕中的this指向,还b包含了常见面试总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
这篇文章主要介绍了JavaScript中new操作符的解析和实现，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
富文本在Web开发上的地位大家可想而知,很多地方都需要用到富文本编辑器,比如开发类似新闻管理小程序、商品简介等,下面这篇文章主要给大家介绍了关于微信小程序实战项目之富文本编辑器实现的相关资料,需要的朋友可以参考下2022-10-10
最新评论