前端在WebSocket中加入Token的解決方式
背景：
相信開發(fā)者你們已經(jīng)遇到或者嘗試過(guò)給WebSocket通過(guò)API去嘗試修改請(qǐng)求頭了
部分搭檔后端同事甚至希望前端做到的是在Request Headers中authorization：Token
注意：JavaScript websocketAPI中并沒(méi)有修改請(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)文章
ElementPlus?Tag標(biāo)簽用法小結(jié)
這篇文章主要介紹了ElementPlus?Tag標(biāo)簽用法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了js html制作簡(jiǎn)單日歷的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript使用localStorage判斷設(shè)置值是否過(guò)期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過(guò)期，通過(guò)設(shè)置過(guò)期時(shí)間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲(chǔ)到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過(guò)期，感興趣的可以了解一下2023-05-05
前端JavaScript跳轉(zhuǎn)頁(yè)面的幾種方法以及區(qū)別詳解
這篇文章主要介紹了前端JavaScript跳轉(zhuǎn)頁(yè)面的幾種方法以及區(qū)別,分別是window.location.href、window.location.assign()、window.location.replace()、window.location.reload()、window.location.hash、window.open()和document.location其中方法,需要的朋友可以參考下2025-04-04
微信小程序手機(jī)號(hào)碼驗(yàn)證功能的實(shí)例代碼
這篇文章主要介紹了微信小程序手機(jī)號(hào)碼驗(yàn)證功能的實(shí)例代碼及微信小程序正則判斷手機(jī)號(hào)的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
html 鎖定頁(yè)面(js遮罩層彈出div效果)，需要的朋友可以參考下。2009-10-10
uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決
最近有個(gè)需求就是要用canvas畫個(gè)分享的海報(bào),所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決方法,需要的朋友可以參考下2023-09-09
JavaScript中的this指向綁定規(guī)則及常見(jiàn)面試總結(jié)
這篇文章主要為大家介紹了JavaScript中的this指向綁定規(guī)則及箭頭韓碩中的this指向,還b包含了常見(jiàn)面試總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
詳解JavaScript中new操作符的解析和實(shí)現(xiàn)
這篇文章主要介紹了JavaScript中new操作符的解析和實(shí)現(xiàn)，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)
富文本在Web開發(fā)上的地位大家可想而知,很多地方都需要用到富文本編輯器,比如開發(fā)類似新聞管理小程序、商品簡(jiǎn)介等,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-10-10