使用 Nuxt 的中间件进行用户重定向和身份验证

Question

如果用户在尝试使用以下代码访问某些页面时未登录，我会尝试将用户重定向到登录页面。

// middlware/authenticated.js
import firebase from 'firebase'

export default function ({ store, redirect }) {
  let user = firebase.auth().currentUser   
  store.state.user = user //this doesn't work
  if (!user) {
    console.log('redirect')
    return redirect('/login')   
  }
}

但是，问题出在此代码上，当我刷新页面时，我被重定向到登录页面，虽然不使用中间件，但我可以在登录后留在同一页面。出于某些原因，我不知道为什么，firebase 不能在中间件中工作。

我应该如何修改这个中间件或实现这个功能？

谢谢。

//middleware/authenticated.js
export default function ({
  store,
  redirect
}) {
  if (!store.getters['index/isAuthenticated']) {
    return redirect('/login')
  }
}

//post.vue
  async mounted () {
    if (process.browser) {
      let user;
      if (!this.user) user = await auth(); // this auth is a plugin
      await Promise.all([
        this.user ? Promise.resolve() : this.$store.dispatch("setUser", { user: user || null })
      ]);
      this.isLoaded = true;
    }
  },

//plugins/auth.js
import firebase from '~/plugins/firebase'

function auth () {
  return new Promise((resolve, reject) => {
    firebase.auth().onAuthStateChanged((user) => {
      resolve(user || false)
    })
  })
}
export default auth

Answer 1

默认情况下，Firebase 会在成功验证时保留用户的登录状态。此示例使用会话来存储用户 uid 和 cookie 来存储用户令牌，并在会话结束的情况下使用（例如浏览器关闭时），然后启动新会话但用户仍根据 Firebase 进行身份验证.在此类情况下，用户无需登录即可查看受保护的资源。

保护它的基本中间件应如下所示（如果您有一个名为 User 的存储模块）

export default function ({ store, redirect }) {
  if (!store.getters['modules/user/isAuthenticated']) {
    return redirect('/auth/signin')
  }
}

在your main Store you use the ServerInit Function 中获取用户（如果Cookie 中保存了一个）并将其加载到您的用户存储模块中，该模块将用于在中间件中进行验证。

您的用户存储模块应为like this，并请记住，您在注销用户时会删除 Cookie，以便他完全注销。

我使用上面提到的东西作为我的身份验证的开始并对其进行了一些修改，你也可以这样做。大部分功劳归于 davidroyer，他设置了 this nice Github Repo，其中包括所有需要的文件，作为如何实现目标的一个很好的例子。