vue3实现websocket单点登录

要实现 websocket 单点登录，可以借助 vue3 的 Composition API 和 Vuex。

首先，在 `main.js` 中创建一个 WebSocket 实例，并将其挂载到 Vuex 的 state 上。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      // WebSocket 实例
      ws: null,
    }
  },
  mutations: {
    // 设置 WebSocket 实例
    setWebSocket(state, ws) {
      state.ws = ws
    },
  },
})

const ws = new WebSocket('ws://localhost:3000')

// 监听 WebSocket 连接
ws.addEventListener('open', () => {
  console.log('WebSocket 连接成功')
})

// 监听 WebSocket 消息
ws.addEventListener('message', event => {
  const message = JSON.parse(event.data)
  console.log('收到消息：', message)
})

// 将 WebSocket 实例保存到 Vuex 的 state 中
store.commit('setWebSocket', ws)

然后，在组件中使用 Composition API 获取 Vuex 中的 WebSocket 实例，并在 `onMounted` 钩子中进行登录操作。

import { onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    onMounted(() => {
      const { ws } = store.state

      // 登录操作
      ws.send(JSON.stringify({
        type: 'login',
        token: 'xxx' // 用户的 token
      }))
    })
  },
}

这样，当用户打开页面时，会自动连接 WebSocket 并进行登录操作。当用户在其他页面进行了登录，WebSocket 会接收到相应的消息，我们可以在 Vuex 中维护一个 `isLogin` 状态，用于判断用户是否已经登录。

const store = createStore({
  state() {
    return {
      ws: null,
      isLogin: false // 用户是否已登录
    }
  },
  mutations: {
    setWebSocket(state, ws) {
      state.ws = ws
    },
    setIsLogin(state, isLogin) {
      state.isLogin = isLogin
    }
  },
})

// 监听 WebSocket 消息
ws.addEventListener('message', event => {
  const message = JSON.parse(event.data)

  switch (message.type) {
    case 'login':
      // 服务端返回登录成功消息
      store.commit('setIsLogin', true)
      break

    case 'logout':
      // 服务端返回退出登录消息
      store.commit('setIsLogin', false)
      break
  }
})

在组件中，我们可以使用 `computed` 属性监听 `isLogin` 状态的变化，并根据需要进行页面跳转或其他操作。

import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const store = useStore()
    const router = useRouter()

    // 监听用户登录状态
    const isLogin = computed(() => store.state.isLogin)

    // 跳转到登录页面
    if (!isLogin) {
      router.push('/login')
    }
  },
}

以上是一个简单的实现方式，具体实现还需要根据具体业务场景进行调整。