前端在WebSocket中加入Token的解決方式
更新時間：2023年10月10日 09:57:30 作者：寫B(tài)UG的牛
這篇文章主要給大家介紹了關于前端在WebSocket中加入Token的解決方式,文中提供了3種解決方法,對大家學習或者使用WebSocket具有一定的參考借鑒價值,需要的朋友可以參考下
背景：
相信開發(fā)者你們已經遇到或者嘗試過給WebSocket通過API去嘗試修改請求頭了
部分搭檔后端同事甚至希望前端做到的是在Request Headers中authorization：Token
注意：JavaScript websocketAPI中并沒有修改請求頭的方法。
你只能另謀其路了
解決方式1：請求地址中帶參數(shù)
const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}?${token}/websocket`)解決方式2:send發(fā)送數(shù)據
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)這樣的報錯
ws.ts:68 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The subprotocol '"Token"' is invalid.
請?zhí)幚硪幌履愕腡oken
const ws = new WebSocket(url, [JSON.parse(token)])
注意：在后端響應的時候也需要帶上Token響應
當然如果你還有其他參數(shù)需要在頭部傳遞，你也可以
const ws = new WebSocket(url, ['v10.stomp', 'v11.stomp', token])
題外話：如果后端強調需要你在Request Headers中authorization：Token掛載，你告訴他做不到即可。
總結
到此這篇關于前端在WebSocket中加入Token的解決方式的文章就介紹到這了,更多相關前端在WebSocket加入Token內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了ElementPlus?Tag標簽用法,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了js html制作簡單日歷的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript使用localStorage判斷設置值是否過期
本文主要介紹了JavaScript使用localStorage判斷設置值是否過期，通過設置過期時間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據存儲到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據并檢查是否過期，感興趣的可以了解一下2023-05-05
前端JavaScript跳轉頁面的幾種方法以及區(qū)別詳解
這篇文章主要介紹了前端JavaScript跳轉頁面的幾種方法以及區(qū)別,分別是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指向綁定規(guī)則及常見面試總結
這篇文章主要為大家介紹了JavaScript中的this指向綁定規(guī)則及箭頭韓碩中的this指向,還b包含了常見面試總結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
詳解JavaScript中new操作符的解析和實現(xiàn)
這篇文章主要介紹了JavaScript中new操作符的解析和實現(xiàn)，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
微信小程序實戰(zhàn)項目之富文本編輯器實現(xiàn)
富文本在Web開發(fā)上的地位大家可想而知,很多地方都需要用到富文本編輯器,比如開發(fā)類似新聞管理小程序、商品簡介等,下面這篇文章主要給大家介紹了關于微信小程序實戰(zhàn)項目之富文本編輯器實現(xiàn)的相關資料,需要的朋友可以參考下2022-10-10