Как получить статус подключения к веб-сокету в компоненте Vue?

Question

evlgromov @evlgromov

Как получить статус подключения к веб-сокету в компоненте Vue?

Подключение к сокету устанавливается в index.js следующим образом:

Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO(process.env.BACKEND_URL, {query: `auth_token=${Vue.auth.token()}`}),
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  },
}));

Далее в App.vue подписываемся на событие connect с помощью плагина Vue-Socket и устанавливаем флаг состояния подключения:

sockets: {
    connect: function() {
      this.connect = true
    }
  },

Далее, после авторизации на странице Login редиректимся на страницу Home, но страница не рендерится, так как не проходит проверку на состояние подключенного сокета, которая установлена в App.vue и this.connect возвращает false до того момента пока я не перезагружу страницу:

<div id="app" v-if="appReady">
    <router-view />
</div>

appReady() {
      return this.authReady && this.connect
},

Возможно соединение устанавливается до авторизации в приложении и без токена не удается установить соединение, но на сервере стоят настройки:

io.use(jwtAuth.authenticate({
    secret: process.env.JWT_SECRET,
    algorithm: 'HS256',
    succeedWithoutToken: true
  },  async (payload, done) => {
    if(payload && payload._id) {
      try {
        const user = await (await User.findById(payload._id)).toObject();
        if(!user) return done(null, false, 'user does not exist');
        
        user._id = user._id.toString();
        done(null, user);
      } catch (error) {
        done(error);
      }
    } else {
      return done();
    }
  }));
  io.on('connection', (client) => {
    if (clients[client.request.user._id]) {
      return;
    }
    clients[client.request.user._id] = {
      clientId: client.id,
      role: client.request.user.role,
    };

Как мне при авторизации подключиться к сокету и установить флаг подключения?