nuxtserverinit and user login

Question

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?

Do you need this handling on a specific page, or accross the app? — tho-masn, Sep 08 '21 at 11:29
Across the app, which then data is managed in the vuex store. — EECode, Sep 08 '21 at 11:32
*since there's no page reload*, then use `window.location = '/'` on sign in, it's normal to send someone somewhere upon login, it wont feel buggy to the user — Lawrence Cherone, Sep 08 '21 at 11:36
Either the approach @LawrenceCherone suggested, or you dispatch some store actions to load the data, after the login was successful. — tho-masn, Sep 08 '21 at 11:42

score 2 · Answer 1 · edited Sep 08 '21 at 14:41

2

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.

edited Sep 08 '21 at 14:41

kissu

40,416
14
65
133

answered Sep 08 '21 at 11:55

EECode

86
4

What if user reloads the page, the approach you applied still works to load all the data from api call? – Wikki Dec 06 '21 at 20:13
Yes, because the nuxtServerInit will do it on reload. – EECode Jan 02 '22 at 18:14

nuxtserverinit and user login

1 Answers1