Nuxt.js: Fetch is fired after redirect in middleware

[dw72]

I have two middlewares, one for router, specified in nuxt.config.js (_auth.js_)

import { AUTH_TOKEN_REQUEST } from '../store/auth'

const getCookieFromReq = req => {
  return decodeURIComponent(req.headers.cookie)
    .split(';')
    .find(c => c.startsWith('feathers-jwt='))
}

const getTokenFromCookie = cookie => {
  return cookie ? cookie.trim().split('=')[1] : null
}

export default ({ store, req }) => {
  console.log('---AUTH MIDDLEWARE---')
  const cookie = process.server ? getCookieFromReq(req) : decodeURIComponent(document.cookie)
  const token = getTokenFromCookie(cookie)
  if (token) {
    return store.dispatch(`auth/${AUTH_TOKEN_REQUEST}`, token)
  }
}

and second specified in any page who needs authentication (_authenticated.js_)

export default ({ store, route, redirect }) => {
  console.log('---AUTHENTICATED MIDDLEWARE---')
  const isAuthenticated = store.getters['auth/isAuthenticated']
  if (!isAuthenticated) {
    redirect('/auth/login', { next: encodeURIComponent(route.path) })
  }
}

like this page (_index.vue_)

import { mapState, mapGetters } from 'vuex'

export default {
  middleware: ['authenticated'],
  computed: {
    ...mapState('users', ['users']),
    ...mapGetters('auth', ['isAuthenticated'])
  },
  fetch: ({ store }) => {
    console.log('---FETCH USERS---')
    if (store.getters['auth/isAuthenticated']) {
      return store.dispatch('users/USERS_FIND_REQUEST')
    }
  }
}

And have a problem because fetch method is fired on my page after redirect in middleware, but only on client. When I first click link to that page after refresh all is ok (fetch is not called), but when i go back and click link next time I have this effect.

auth.js:17 ---AUTH MIDDLEWARE---
authenticated.js:17 ---AUTHENTICATED MIDDLEWARE---
index.vue?e488:27 ---FETCH ADMIN---
auth.js:17 ---AUTH MIDDLEWARE---

Why is fetch fired?

_{This question is available on Nuxt.js community (#c2319)}

[clarkdo]

/cc @pi0 @Atinux

[Steve525]

@dw72 I'm seeing the same thing in my application and was about to create a similar ticket. Thanks for posting this. I would love to get to the bottom of this. Upgrading from 1.0.0-rc11 to 1.1.1.

If it helps any, I see the same thing for asyncData as well as fetch.

[wagerfield]

I too am seeing what I believe to be erroneous behaviour with middleware redirects and page component validate/fetch/asyncData methods.

I've created a simple repo demoing this:

https://github.com/wagerfield/nuxt-fetch-error

Please see the README for a walkthrough explanation of my observations.

/cc @clarkdo @Atinux

[sdr0x07b6]

This issue is also the same. https://github.com/nuxt/nuxt.js/issues/542
Have regressed since it was fixed in the past?🤔

[dw72]

@sdr0x07b6 this time first go to new page after current page refresh is working ok in client too, but in next openings nuxt functions are fired (fetch, asyncData, validate). At least this is how it works for me.

[wagerfield]

Following on from my previous comment I would to understand what the expected behaviour is when context.redirect is called in some middleware.

If context.redirect is called in any middleware that navigates the user to a different route.path, should the page component that matched the initial route.path (before the redirect) have it's validate/fetch/asyncData methods called?

My feeling is that it shouldn't—but that is not the behaviour that I am observing in Nuxt v1.1.1.

I have just updated the demo example that I posted above with a more thorough test. I have also updated the README to explain what I have observed and what I think should happen.

@dw72 the above demo repo replicates the behaviour you are talking about.

Simple example would be where you have a page that requires authentication. That page's fetch method might need some token in the store that is only set when a user is authenticated. In the case that the user is not authenticated, some middleware will redirect them to a page that doesn't require auth (like a login page) and the fetch method of the page requiring auth is never called.

[Atinux]

v1.2.0 is out :)

[dw72]

Seems it is working ok now 👍

[wagerfield]

Works perfectly, thank you @Atinux!

[archieDeveloper]

I updated Nuxt to the latest version (1.3.0), but it still does not work for me in this situation:

pages /profile/course and /profile

/profile/index.vue

<script>
export default {
    fetch ({ redirect, store }) {
        console.log('FETCH PROFILE/INDEX')
        redirect('/profile/courses')
    }
}
</script>

/profile/course.vue

<script>
export default {
    fetch ({ store }) {
        console.log('FETCH PROFILE/COURSE')
    }
}
</script>

Being on the page /profile/course there is a link (in the breadcrumbs) that leads to the page /profile which should redirect back to /profile/course, in general this is what happens, but fetch again for /profile/course is not is.

Help me!

[alexdilley]

Following on from this, I'd expect the fetch of the page being redirected _to_ to be called? It appears not to be. @Atinux's fix addresses not firing the fetch in the page redirected _from_ but somewhere along the way I'm guessing the execution of the fetch of the resulting page got regressed. I think this is what @archieDeveloper is experiencing above.

[archieDeveloper]

I can make a simple sample application that will have this bug. My English is poor :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.