Nuxt 中间件未在初始渲染时触发

Question

以下代码用于检查用户的角色。 每次重新加载站点时，中间件都会运行，并采用新的路由。

// Some nuxt middleware
import * as firebase from 'firebase/app'
import 'firebase/auth'

export default function ({ app, store, route, redirect }) {
  app.router.beforeEach((to, from, next) => {
    // For some reason, this does not load every time.
    firebase.auth().onAuthStateChanged((userAuth) => {
      if (userAuth) {
        console.log(userAuth)
        firebase
          .auth()
          .currentUser.getIdTokenResult()
          .then(function ({ claims }) {
          // some auth stuff
    })
  })
}

出于某种原因，如果站点重新加载，则此用户身份验证函数始终返回null 。 这导致其余功能由于未知的用户数据/用户角色而失败。

firebase.auth().onAuthStateChanged((userAuth) => {...})

所以我的问题是，为什么在重新加载站点时上层函数返回null ？

附： 如果采用新路线，一切正常，只有在重新加载站点时才会失败。

Answer 1

beforeEach是当你从一个页面导航到另一个页面时触发的守卫，这要归功于 vue 路由器，也就是使用<nuxt-link>或$router.push 。

在初始页面加载时，没有导航，因为您正在呈现由服务器生成的内容，而不是直接由客户端生成。

Nuxt 文档中对中间件的定义

中间件允许您定义可以在呈现页面或一组页面（布局）之前运行的自定义函数。

注意，在渲染之前。 这意味着中间件将作为您的beforeEach和初始渲染运行。
因此，您可以完全剥离路由器保护部分，并简单地让中间件如此

export default function ({ app, store, route, redirect }) {
  firebase.auth().onAuthStateChanged((userAuth) => {
  ...