CODEWITHSUNDEEP
nuxt.jsvuexnuxt-authnuxtserverinit
EECode
EECode

Reputation: 86

nuxtserverinit and user login

I'm working on a nuxt app and need to get data from an api. Data only needs to be served to logged in user. In my vuex store index.js, I wrote the following code:

async nuxtServerInit({ commit }) {
  if (this.$auth.loggedIn) {
    await Promise.all([
      (async () => {
        const response = await this.$axios.get('api/all/users')

        commit('setUsers', response.data)
      })(),
      (async () => {
        const response = await this.$axios.get('api/all/teams')

        commit('setTeams', response.data)
      })(),
      (async () => {
        const response = await this.$axios.get('api/all/clubs')

        commit('setClubs', response.data)
      })(),
    ])
  }
},

The following works, and loads the data on refresh. However - when a user is logging in, the nuxtserverinit wont actually fire, since there's no page reload. What's the proper way to deal with that?

Upvotes: 2

Views: 857

Answers (1)

EECode
EECode

Reputation: 86

So thanks to your help, what I did for now is dispatching the store actions right after login. So in my login page, I did:

methods: {
  ...mapActions(['getTeams', 'getUsers', 'getClubs']),
  loginUser(loginInfo) {
    this.$auth
      .loginWith('local', {
        data: loginInfo,
      })
      .then(() => {
        this.getTeams()
        this.getUsers()
        this.getClubs()
      })
  },
},

This won't require a page reload, so will still be fast, and will only load the data after a user logged in.

Upvotes: 2

Related Questions