异步的 new Vue() 用于等待初始认证。

14 浏览
0 Comments

异步的 new Vue() 用于等待初始认证。

我对Vue还不太熟悉，目前正在设置一个使用Firebase身份验证和Firestore进行基本RBAC的应用程序。

为了防止未经授权的用户进入路由，我的路由器有一个自定义的 AuthGuard 来检查本地用户的角色（后端实现了类似的规则）。

我的一个问题是，发送链接给受保护页面的人是行不通的。身份验证守卫会阻止它们加载页面，因为当Vue应用程序初始化时，本地的 user 是未设置的。

所以我想到了一种方法，通过在 main.js 中结构化我的 init 函数，延迟创建Vue应用程序：

在 init 函数中，我等待 firebase.auth().onAuthStateChanged 触发并告诉我用户是否有有效的令牌。它确实起作用，但感觉不太对劲。

异步创建一个新的Vue应用程序是否可行？是否有更好的方法，例如在路由上延迟加载身份验证守卫之类的？

0

2 答案

0 Comments

在使用Vue和Azure Active Directory身份验证时，我做了与上述相同的操作，似乎这是最佳的做法。

请参考Miguel的回答：https://stackoverflow.com/a/45899653/2703700

这是你正在寻找的答案吗？

确实有其他人也这样做的确实有帮助。谢谢Tim 🙂

0
0 Comments

问题的原因：在这段代码中，通过调用firebase.auth().onAuthStateChanged()来监听用户的身份验证状态变化。当用户进行身份验证时，将创建一个新的Vue实例(app)并将其挂载到id为"dashboard"的DOM元素上。然而，由于Vue实例的创建是异步的，可能会导致初始身份验证期间的某些操作无法等待Vue实例的创建完成。

解决方法：使用异步的方式创建Vue实例，确保在身份验证完成之前不会执行后续的操作。以下是修改后的代码示例：

import Vue from 'vue'
import firebase from 'firebase/app'
import 'firebase/auth'
/**
 * Initialize Firebase
 */
firebase.initializeApp(FIREBASE_CONFIG)
/**
 * Initialize Vue.js
 */
(async () => {
  await new Promise(resolve => firebase.auth().onAuthStateChanged(resolve))
  new Vue({
    render: h => h(App)
  }).$mount('#dashboard')
})()

0