For my nuxt app, i need to use pusher for handling websocket.
I use pusher-js, and i created a nuxt plugin to enable pusher throughtout my app.
The problem is that i need to be auth to use pusher. That my plugin :
import Pusher from 'pusher-js'
export default ({ $axios, env, $auth }, inject) => {
if (!$auth.loggedIn) {
return
}
const pusher = new Pusher(process.env.PUSHER_APP_KEY, {
cluster: 'eu',
authEndpoint: `${$axios.defaults.baseURL}/broadcasting/auth`,
auth: {
headers: {
Authorization: $auth.strategy.token.get()
}
}
})
inject('pusher', pusher)
}
Here is where i register my plugin in the nuxt-config
auth: {
redirect: {
login: '/auth/login',
logout: '/auth/login',
callback: '/auth/login',
home: '/'
},
strategies: {
laravelJWT: {
provider: 'laravel/jwt',
url: process.env.BASE_BACK_URL + '/platform',
endpoints: {
login: { url: '/auth/login', method: 'post' },
user: { url: '/auth/me' },
logout: { url: '/auth/logout', method: 'post' },
refresh: { url: '/auth/refresh' }
},
user: {
property: 'data'
},
token: {
property: 'access_token',
maxAge: 60 * 60
},
refreshToken: {
maxAge: 20160 * 60
}
}
},
plugins: [
{ src: 'plugins/pusher.js', ssr: false }
]
},
When I'm logged and I refresh the page it's fine. But when I log in via login page, the pusher object is not instantiated (because I was not logged in) and when I want to go to my chat page, the website has not refreshed (cause spa) and I obvioulsy get an error cause I want to access pusher but it does not exist.
So is there a way to refresh the plugin when i login, or to enable it only when i'm logged ?
Thx :)