nuxtserverinit 및 사용자 로그인

nuxtserverinit 및 사용자 로그인

nuxt 앱을 만들고 있는데 api에서 데이터를 가져와야 합니다.데이터는 로그인한 사용자에게만 제공되어야 합니다.vuex store index.js에 다음 코드를 입력했습니다.

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)
      })(),
    ])
  }
},

다음은 작동하며 새로 고침 시 데이터를 로드합니다.그러나 사용자가 로그인하고 있을 때 페이지 새로고침이 없기 때문에 nuxtserverinit은 실제로 실행되지 않습니다.어떻게 대처하면 좋을까요?

그래서 당신의 도움 덕분에 저는 로그인 후 바로 스토어 액션을 디스패치했습니다.로그인 페이지에서 다음을 수행했습니다.

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

이렇게 하면 페이지 새로고침이 필요하지 않으므로 여전히 빠르며 사용자가 로그인한 후에만 데이터가 로드됩니다.

언급URL : https://stackoverflow.com/questions/69102144/nuxtserverinit-and-user-login