Nuxt.js: Page is rendered even if `fetch` called `redirect`

[IlyaSemenov]

If a page has fetch method which invokes redirect immediately (e.g. rejecting users without required permissions), that page is still rendered internally for no reason. This happens in [email protected].

This is however not happening if the same logic is moved to the middleware. It requires a developer to create separate single-use middleware even for ad-hoc page-specific logic.

Experiment 1

Create pages/test.vue:

<template>
  <div>
    This will crash: {{ noSuchVar }}
  </div>
</template>

<script>
export default {
  fetch ({ redirect }) {
    return redirect('/')
  },
}
</script>

Result: opening http://localhost:3000/test immediately redirects to http://localhost:3000 but the following is printed to stderr:

[Vue warn]: Property or method "noSuchVar" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in
 the data option.

found in

---> <Client/pages/test.vue> at client/pages/test.vue
       <Nuxt> at .nuxt/components/nuxt.vue
         <Default> at client/layouts/default.vue
           <Root>

Experiment 2

Create pages/test2.vue:

<template>
  <div>
    This will not crash: {{ noSuchVar }}
  </div>
</template>

<script>
export default {
  middleware: 'test',
}
</script>

and middleware/test.vue:

export default function ({ redirect }) {
  return redirect('/')
}

Result: opening http://localhost:3000/test immediately redirects to http://localhost:3000 and no errors are produced.

Expected result

The two experiments behave identically (no errors are produced in either case).

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

[Atinux]

Should be fixed in next release :)

[pimlie]

@Atinux Just to be sure, I am experiencing the same issue when returning a redirect in asyncData. I guess that is the same issue as this?

[Atinux]

Yep!

[Mikeysax]

I'm getting the same issue using fetch in a page and redirect:

export async function EDIT_TEACHER({ dispatch, commit, state }, { id }) {
  try {
    const { data } = await this.$axios({
      url: `/teachers/${id}/edit`,
      method: 'get'
    });
    commit('SET_TEACHER', data.teacher);
  } catch ({ response }) {
    if (response.status === 401) {
      dispatch('PROMPT_SIGN_IN');
    } else if (response.status === 302) {
      this.$router.push(`/teachers/${id}`);
    }
  }
}

It redirects but then renders the edit page again.

[furyscript]

Also me, some news about that? @Atinux

[cmty[bot]]

This bug-report has been fixed by @Atinux in release v1.4.0.

[Atinux]

If this bug re-appeared, please re-open a fresh bug report with a reproduction.

[furyscript]

Yes this is a repo reproduction: https://github.com/furyscript/nuxt-redirect-error

You need to login, go to inspire page and make sure the first http call is a 200 request. After that try to refresh page (F5 into /inspire) until the http call return a 401 error, so you see that you return to home and not in login page.

[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.