VUE3+signalR实现单点登录

摘要：在MES项目中，不能多人同时操作，方便任务分配追责，使用signalR实现单点登录

1、在项目中安装依赖

npm i @microsoft/signalr

2、使用：在登录成功的时候与服务器建立连接

  //登录和服务器建立连接、实现单点登录
  const startConnection = async (res: any) => {
    try {
      connection.value = new signalR.HubConnectionBuilder()
        .withUrl("/signalr/singlelogin-hub", {
          accessTokenFactory: () => res
        })
        .configureLogging(signalR.LogLevel.Information)
        .withAutomaticReconnect() // 使用默认重连策略
        .build()

      await connection.value.start()
      // 下线消息
      connection.value.on("Offline", (message: any) => {
        logout()
        ElMessageBox.alert("该用户已在其他地方登录", "登录信息", {
          confirmButtonText: "确认",
          callback: () => {
            location.reload() //强制刷新下线
            ElMessage({
              type: "info",
              message: `已退出登录`
            })
          }
        })
        console.log("接收到下线消息：" + message)
      })
      console.log("Connection started")
    } catch (error) {
      //断线重连
      startConnection(getToken())
      console.error("Error starting connection:", error)
    }
  }

3、在退出登录的时候断开连接

  /** 登出 */
  const logout = () => {
　　　//这一行代码就可以
    connection.value.stop()
    removeToken()
    token.value = ""
    roles.value = []
    resetRouter()
    _resetTagsView()
  }