快捷導(dǎo)航

vue3+ts前端封裝EventSource并在請(qǐng)求頭添加token的方法

更新時(shí)間：2024年12月21日 15:54:21 作者：全能全知者

這篇文章主要介紹了vue3+ts前端封裝EventSource并在請(qǐng)求頭添加token,本文將介紹如何使用 event-source-polyfill 來解決這個(gè)問題,需要的朋友可以參考下

vue3+ts前端封裝 EventSource 并在請(qǐng)求頭添加 token

背景介紹

在前端開發(fā)中,我們經(jīng)常需要使用 Server-Sent Events (SSE) 來實(shí)現(xiàn)服務(wù)器向客戶端推送數(shù)據(jù)。但原生的 EventSource 不支持在請(qǐng)求頭中添加自定義字段,這使得我們無法添加 token 等認(rèn)證信息。本文將介紹如何使用 event-source-polyfill 來解決這個(gè)問題。

環(huán)境準(zhǔn)備

首先需要安裝 event-source-polyfill 依賴:

npm install event-source-polyfill
# 或
yarn add event-source-polyfill
# 或
pnpm install event-source-polyfill

如果是ts項(xiàng)目,同時(shí)還需要安裝對(duì)應(yīng)的類型聲明文件:

npm install @types/event-source-polyfill -D
# 或  
yarn add @types/event-source-polyfill -D
# 或
pnpm install @types/event-source-polyfill -D

封裝 SSE 連接方法

在 http 工具類中,我們可以這樣封裝 SSE 連接:
http.ts

import { EventSourcePolyfill } from 'event-source-polyfill'
import store from '@/store'
import type { StateAll } from '@/store'
interface SSEOptions {
  onMessage?: (data: any) => void
  onError?: (error: any) => void 
  onOpen?: () => void
}
// 創(chuàng)建 SSE 連接
function createSSEConnection(url: string, options?: SSEOptions) {
  // 從 store 中獲取 token
  const token = (store.state as StateAll).user.token
  // 創(chuàng)建 EventSource 實(shí)例,添加 token
  const eventSource = new EventSourcePolyfill(BASE_URL + url, {
    headers: {
      'Authorization': token
    }
  })
  // 連接成功回調(diào)
  eventSource.addEventListener('open', () => {
    console.log('SSE連接成功')
    options?.onOpen?.()
  })
  // 接收消息回調(diào)
  eventSource.addEventListener('message', (event: any) => {
    try {
      const data = JSON.parse(event.data)
      options?.onMessage?.(data)
    } catch (error) {
      console.error('解析消息失敗:', error)
      options?.onMessage?.([])
    }
  })
  // 錯(cuò)誤處理
  eventSource.addEventListener('error', (error: any) => {
    console.error('SSE連接錯(cuò)誤:', error)
    // token 失效處理
    if (error?.status === 401) {
      store.commit('user/clearToken')
      window.location.replace('/login')
      return
    }
    options?.onError?.(error)
  })
  return {
    eventSource,
    close: () => {
      eventSource.close()
    }
  }
}

使用示例

在組件中使用封裝好的 SSE 連接:

const unreadMessages = ref<ElectricityMessage[]>([])
let sseConnection: { close: () => void } | null = null
// 建立 SSE 連接
sseConnection = http.createSSEConnection('messages/unread', {
  onOpen: () => {
    console.log('消息連接已建立')
  },
  onMessage: (data) => {
    unreadMessages.value = data
  },
  onError: (error) => {
    console.error('消息連接錯(cuò)誤:', error)
  }
})
// 組件銷毀時(shí)關(guān)閉連接
onUnmounted(() => {
  sseConnection?.close()
})

關(guān)鍵點(diǎn)說明

使用 event-source-polyfill 替代原生 EventSource,支持添加自定義請(qǐng)求頭

在創(chuàng)建連接時(shí)從 store 中獲取 token 并添加到請(qǐng)求頭
處理連接成功、接收消息、錯(cuò)誤等事件
提供關(guān)閉連接的方法,在組件銷毀時(shí)調(diào)用
對(duì) token 失效等特殊錯(cuò)誤進(jìn)行處理

注意事項(xiàng)

確保后端支持 SSE 連接并正確處理 token
注意在組件銷毀時(shí)及時(shí)關(guān)閉連接,避免內(nèi)存泄漏
建議對(duì)接收到的消息做 try-catch 處理,避免解析失敗導(dǎo)致程序崩潰
可以根據(jù)實(shí)際需求擴(kuò)展更多的事件處理和錯(cuò)誤處理邏輯

通過以上封裝,我們就可以在前端優(yōu)雅地使用帶有 token 認(rèn)證的 SSE 連接了。這種方式既保證了安全性,又提供了良好的開發(fā)體驗(yàn)。

到此這篇關(guān)于vue3+ts前端封裝EventSource并在請(qǐng)求頭添加token的文章就介紹到這了,更多相關(guān)vue請(qǐng)求頭添加token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: