前端在WebSocket中加入Token的解決方式
背景：
相信開發(fā)者你們已經(jīng)遇到或者嘗試過給WebSocket通過API去嘗試修改請(qǐng)求頭了
部分搭檔后端同事甚至希望前端做到的是在Request Headers中authorization：Token
注意：JavaScript websocketAPI中并沒有修改請(qǐng)求頭的方法。
你只能另謀其路了
解決方式1：請(qǐng)求地址中帶參數(shù)
const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}?${token}/websocket`)解決方式2:send發(fā)送數(shù)據(jù)
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])如果你出現(xiàn)這樣的報(bào)錯(cuò)
ws.ts:68 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The subprotocol '"Token"' is invalid.
請(qǐng)?zhí)幚硪幌履愕腡oken
const ws = new WebSocket(url, [JSON.parse(token)])
注意：在后端響應(yīng)的時(shí)候也需要帶上Token響應(yīng)
當(dāng)然如果你還有其他參數(shù)需要在頭部傳遞，你也可以
const ws = new WebSocket(url, ['v10.stomp', 'v11.stomp', token])
題外話：如果后端強(qiáng)調(diào)需要你在Request Headers中authorization：Token掛載，你告訴他做不到即可。
總結(jié)
到此這篇關(guān)于前端在WebSocket中加入Token的解決方式的文章就介紹到這了,更多相關(guān)前端在WebSocket加入Token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS實(shí)現(xiàn)樣式清新的橫排下拉菜單效果,通過簡(jiǎn)單的元素遍歷控制頁面元素的動(dòng)態(tài)切換效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了微信小程序中post方法與get方法的封裝的相關(guān)資料,希望通過本文能幫助到大家，讓大家掌握如何封裝，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了js實(shí)現(xiàn)的日期聯(lián)動(dòng)效果，調(diào)試需加入jquery文件,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了js異步編程技巧，使用計(jì)數(shù)器的方式，每完成一個(gè)請(qǐng)求計(jì)數(shù)器加1 當(dāng)計(jì)數(shù)器等于2時(shí)執(zhí)行回調(diào)邏輯,兩個(gè)http并行發(fā)送,從而極大的提高了效率,需要的朋友可以參考下2017-08-08
Storage、cookie的用途和優(yōu)缺點(diǎn)比較
cookie的大小是受限制的，并且每次請(qǐng)求cookie都會(huì)被發(fā)送，浪費(fèi)寬帶，cookie還需要指定作用域，不可以跨域調(diào)用。cookie的作用是與服務(wù)器進(jìn)行交互，作為http規(guī)范的一部分存在，而webstorage僅僅是為了本地“存儲(chǔ)”數(shù)據(jù)而生。2023-07-07
JavaScript實(shí)現(xiàn)的石頭剪刀布游戲源碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的石頭剪刀布游戲源碼分享,挺好玩的小游戲,關(guān)鍵在一些算法上,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了JavaScript之ECharts用法講解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
JS switch判斷 三目運(yùn)算 while 及 屬性操作代碼
這篇文章主要介紹了JS switch判斷 三目運(yùn)算 while 及 屬性操作代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了前端組件化基礎(chǔ)知識(shí)，我們一起來學(xué)習(xí)前端組件化的知識(shí)，組件化在前端架構(gòu)里面是最重要的部分，了解什么是組件化和一個(gè)組件的基本組成部分開始2021-04-04
Chrome不支持showModalDialog模態(tài)對(duì)話框和無法返回returnValue問題的解決方法
上個(gè)禮拜修改測(cè)試一個(gè)后臺(tái)管理項(xiàng)目，在測(cè)試與各個(gè)瀏覽器兼容性的時(shí)候，發(fā)現(xiàn)在chrome瀏覽器下showModalDialog方法顯示的并不是模態(tài)對(duì)話框，就像新打開一個(gè)頁面一樣，父窗口仍然可以隨意獲取焦點(diǎn)，并可以打開多個(gè)窗體，而且返回值returnValue也無法返回，一直是undefined2016-10-10