异步 new Vue() 等待初始认证

Posted 2023-02-22

【中文标题】异步 new Vue() 等待初始认证

【英文标题】：Asynchronous new Vue() to wait for initial authentication

【发布时间】：2018-12-03 11:32:01

【问题描述】：

我对 Vue 很陌生，目前正在设置一个使用 firebase 身份验证和 firestore 进行基本 RBAC 的应用程序。 为了防止未经授权的用户进入路由，我的路由器有一个自定义的 AuthGuard 检查本地用户角色（后端实现类似的规则）

export default new Router(
  routes: [
    
      path: '/users',
      name: 'Users',
      component: Users,
      beforeEnter: AuthGuard(user => user.uid && user.roles.admin)
    
..
])

我在此设置中遇到的一个问题是无法向人们发送指向受保护页面的链接。 auth 守卫阻止他们加载页面，因为本地 user 在 Vue 应用程序初始化时未设置初始化。

所以我想出了一个方法，通过构建我的 main.js 一些东西来延迟我的 Vue 应用程序的创建：

import Vue from 'vue'
...
init()
.then(() => new Vue(..)

在init 函数期间，我正在等待firebase.auth().onAuthStateChanged 触发并告诉我用户是否拥有有效令牌。它确实有效，但感觉不对。

异步创建新的Vue App可以吗？有没有更好的方法，比如在路由上延迟加载身份验证守卫之类的？

【参考方案1】：

我对 Vue 和 Azure Active Directory 身份验证做同样的事情，似乎是最好的方法。

请看 Miguels 回答：https://***.com/a/45899653/2703700

这就是你要找的答案吗？

【讨论】：

肯定有助于了解其他人也这样做。谢谢蒂姆:)

【参考方案2】：

我也在做同样的事情。如果有人对更具体的示例感兴趣，这里有一个 sn-p：

import Vue from 'vue'
import firebase from 'firebase/app'
import 'firebase/auth'

/**
 * Initialize Firebase
 */

firebase.initializeApp(FIREBASE_CONFIG)

/**
 * Initialize Vue.js
 */

let app;

firebase.auth().onAuthStateChanged(user => 
  if (!app) 
    app = new Vue(
      render: h => h(App)
    ).$mount('#dashboard')
  
)