脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • JS实现样式清新的横排下拉菜单效果

    JS实现样式清新的横排下拉菜单效果

    这篇文章主要介绍了JS实现样式清新的横排下拉菜单效果,通过简单的元素遍历控制页面元素的动态切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 微信小程序中post方法与get方法的封装

    微信小程序中post方法与get方法的封装

    这篇文章主要介绍了微信小程序中post方法与get方法的封装的相关资料,希望通过本文能帮助到大家，让大家掌握如何封装，需要的朋友可以参考下
    2017-09-09
  • js日期联动示例

    js日期联动示例

    这篇文章主要介绍了js实现的日期联动效果，调试需加入jquery文件,需要的朋友可以参考下
    2014-05-05
  • js异步编程小技巧详解

    js异步编程小技巧详解

    这篇文章主要介绍了js异步编程技巧，使用计数器的方式，每完成一个请求计数器加1 当计数器等于2时执行回调逻辑,两个http并行发送,从而极大的提高了效率,需要的朋友可以参考下
    2017-08-08
  • Storage、cookie的用途和优缺点比较

    Storage、cookie的用途和优缺点比较

    cookie的大小是受限制的，并且每次请求cookie都会被发送，浪费宽带，cookie还需要指定作用域，不可以跨域调用。cookie的作用是与服务器进行交互，作为http规范的一部分存在，而webstorage仅仅是为了本地“存储”数据而生。
    2023-07-07
  • JavaScript实现的石头剪刀布游戏源码分享

    JavaScript实现的石头剪刀布游戏源码分享

    这篇文章主要介绍了JavaScript实现的石头剪刀布游戏源码分享,挺好玩的小游戏,关键在一些算法上,需要的朋友可以参考下
    2014-08-08
  • JavaScript之ECharts用法讲解

    JavaScript之ECharts用法讲解

    这篇文章主要介绍了JavaScript之ECharts用法讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JS switch判断 三目运算 while 及 属性操作代码

    JS switch判断 三目运算 while 及 属性操作代码

    这篇文章主要介绍了JS switch判断 三目运算 while 及 属性操作代码,需要的朋友可以参考下
    2017-09-09
  • 前端组件化基础知识详细讲解

    前端组件化基础知识详细讲解

    这篇文章主要介绍了前端组件化基础知识，我们一起来学习前端组件化的知识，组件化在前端架构里面是最重要的部分，了解什么是组件化和一个组件的基本组成部分开始
    2021-04-04
  • Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    上个礼拜修改测试一个后台管理项目，在测试与各个浏览器兼容性的时候，发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框，就像新打开一个页面一样，父窗口仍然可以随意获取焦点，并可以打开多个窗体，而且返回值returnValue也无法返回，一直是undefined
    2016-10-10

最新评论