Tengo un proyecto Nuxt ejecutándose sin representación del lado del servidor, es decir, solo del lado del cliente.

Un script de middleware consulta una API remota para ver si el usuario debe volver a iniciar sesión. Si es así, se activa una redirección a la página de inicio de sesión:

/middleware/checkLogin.js:

 import {apiReq} from '~/assets/js/utils' export default async ctx => { let privateRoute = ctx.store.state.privateRoutes.includes(ctx.route.name); //is logout request - nothing check required if (ctx.route.name == 'index' && ctx.route.query.logout) return; //check login and react accordingly let res = await apiReq.call(ctx, 'checkLogin'); if (res === null) return; privateRoute && !res.data.result && redir('/?promptLogin=1'); !privateRoute && res.data.result && redir('/animals'); } const redir = route => onNuxtReady(() => $nuxt.$router.push(route));

El problema que tengo es que, a pesar de la redirección, el ciclo de vida continúa para cargar la página (a la que el usuario no debería poder acceder), incluidos sus asyncData etc.

páginas/algunaPáginaPrivada.vue

 export default { asyncData() { //this still runs, even if middleware logged a redirect } }

Resultado deseado : cuando se registra la redirección, los pasos posteriores del ciclo de vida no se ejecutan.

¿Hay alguna manera de que pueda lograr esto? Podría registrar algo en el estado del middleware y usarlo como una condición en asyncData para que no se ejecute, pero eso parece extraño.

/middleware/checkLogin.js

 if (privateRoute && !res.data.result) { ctx.store.commit('dontDoStuff', 1); redir('/?promptLogin=1'); }

/pages/algunaPágina.vue

 asyncData({store}) { if (store.state.dontDoStuff) return; //then this won't run... }