Nuxt - 退出重定向的生命周期？

Question

我有一个 Nuxt 项目在没有服务器端渲染的情况下运行，即完全只有客户端。

中间件脚本查询远程 API 以查看用户是否必须重新登录。如果是这样，则会触发到登录页面的重定向：

/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));

我遇到的问题是，尽管进行了重定向，但生命周期仍在继续加载页面（用户不应访问的页面），包括其 asyncData 等。

pages/somePrivatePage.vue

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

期望结果：记录重定向后，后续生命周期步骤不会运行。

有什么方法可以实现吗？我可以从中间件以状态记录某些内容，并将其用作asyncData 中的条件，因此它不会执行，但这似乎很hacky。

/middleware/checkLogin.js

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

/pages/somePage.vue

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

Answer 1

问题是中间件正在使用$nuxt.$router.push，它只是推送新路由而不是重定向。

Nuxt 上下文包含一个应该用于重定向的redirect function：

// middleware/checkLogin.js
export default async ctx => {
  ⋮                                           ?
  privateRoute && !res.data.result && ctx.redirect('/?promptLogin=1')
  !privateRoute && res.data.result && ctx.redirect('/animals')
}                                             ?

demo