Can't force connectionUrl recalculation after disconnect - old token value used as query param

[lokkirill]

Describe the bug We use jwt token as query param - ws://localhost:3031/cable?Auth=${token}. Connection and subscription to NotificationChannel start while component (visible if user logged in) creation in connectChannel function:

async connectChannel () {
  await this.$cable.connection.connect(() => `${ process.env.WEBSOCKET_HOST }?Auth=${ this.token }` )
  await this.$cable.subscribe({ channel: 'NotificationChannel' })
}

This component destroys at user logout:

destroyed () {
  this.$cable.connection.disconnect()
}

So after next login (new token value in store) we see old token value in connectionUrl. We tried to setup connectionUrl both as string and function both from component and plugin initializer.

To Reproduce Steps to reproduce the behaviour:

1. Get some value as token from store for connectionUrl calculation
2. Connect with this url
3. Disconnect
4. Update token value in store
5. Connect again (url will contain old token value)

Expected behaviour connectionUrl have to use actual store data for every 'connection' action.

Plugin version: 2.4.4

Is it possible to force update connectionUrl after disconnect/while new connect or send jwt not as query param?

[kostyamm]

@lokkirill +1

[mclintprojects]

@lokkirill @kmikhaltsevich I just published a patch (v2.4.5) that fixes this bug. Kindly update and let me know if it fixes your issue.

[kostyamm]

@mclintprojects Hello After disconnecting with this.$cable.unsubscribe('ChatChannel') or this.$cable.connection.disconnect() or when these two methods are used together during a user's logout and next authorization of a new user with a new token , the connection still works with the old token

obviously solved by page reload :))

[mclintprojects]

@kmikhaltsevich Can I see your code? I want to confirm that you're manually connecting with the new token too.

[kostyamm]

@mclintprojects Sorry, I can't give you a link to the repository

Notifications component:

async connectChannel () {
  await this.$cable.connection.connect(`${ process.env.WEBSOCKET_HOST }?Auth=${ this.token }`)
  await this.$cable.subscribe({ channel: 'NotificationChannel' })
}

destroyed () {
  this.$cable.connection.disconnect()
}

mounted () {
  this.connectChannel()
}

created () {
  this.fetchNotifications()
} 

actioncable-vue.js plugins file

import Vue from 'vue'
import ActionCableVue from 'actioncable-vue'

export default function ({ store }) {
  if (process.client) {
    Vue.use(ActionCableVue, {
      debug: true,
      debugLevel: 'all',
      connectImmediately: false,
      store
    })
  }
}

[kostyamm]

this.token === token assigned during authorization. it is being updated. accordingly ${ process.env.WEBSOCKET_HOST }?Auth=${ this.token } is correct

[mclintprojects]

@kmikhaltsevich Is this.token set to the new token before your call to setup the action cable connection in mounted?

[kostyamm]

@mclintprojects Yes, you are right

[mclintprojects]

I just realized that I never asked this. Are you saying the bug still exists on V2.4.5 or it's been fixed? @kmikhaltsevich

[kostyamm]

@mclintprojects yes there is an error in V2.4.5. maybe i'm making a mistake while creating a new connection?

[mclintprojects]

@kmikhaltsevich Kindly update to v2.4.6 and try again. I think it fixes it.

[kostyamm]

@mclintprojects Problem still exists. A little later I will try to initialize a bug on a new / clean project

[mammad2c]

Hi, I created a pr #58 to fix this issue.