Nativescript Vue - 渲染前 main.js 中的异步操作

Posted 2023-04-13

【中文标题】Nativescript Vue - 渲染前 main.js 中的异步操作

【英文标题】：Nativescript Vue - async operations in main.js before rendering

【发布时间】：2021-08-10 20:35:35

【问题描述】：

我想通过 Firebase 身份验证向我的应用添加登录页面： https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/master/docs/AUTHENTICATION.md

按照指南，我在 init firebase 中添加了“onAuthStateChanged”函数。

现在我想根据 Firebase 函数返回的值将正确的页面传递给 Vue 实例创建中的渲染函数。 如果用户通过身份验证，将呈现“home.vue”页面，否则呈现“login.vue”页面。

问题在于firebase函数在Vue实例创建后返回用户的状态。

这是我的代码：

import Vue from 'nativescript-vue'
import store from './store'
import Home from './components/Page/home.vue'
import Login from './components/Page/login.vue'
import VueDevtools from 'nativescript-vue-devtools'

var firebase = require("@nativescript/firebase").firebase;

var pageToRender;

firebase.init(
  onAuthStateChanged: function(data) 
    if (data.loggedIn) 
      pageToRender = Home;
    else
      pageToRender = Login;
    
  
).then(
    function () 
      console.log("firebase.init done");
    ,
    function (error) 
      console.log("firebase.init error: " + error);
    
);

if(TNS_ENV !== 'production') 
  Vue.use(VueDevtools)


// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

new Vue(
  store,
  render: h => h('frame', [h(pageToRender)])
).$start()

我已经尝试将所有代码移动到异步函数中，以便在创建 Vue 实例之前等待 firebase 响应，但我收到错误：

System.err：错误：缺少主条目。应用程序无法启动。 验证应用引导程序。

这样：

async function start()

  var loggedIn = await firebase_start();
  var pageToRender;

  if (loggedIn) 
    pageToRender = Home;
  else
    pageToRender = Login;
  

  if(TNS_ENV !== 'production') 
    Vue.use(VueDevtools)
  

  // Prints Vue logs when --env.production is *NOT* set while building
  Vue.config.silent = (TNS_ENV === 'production')

  new Vue(
    store,
    render: h => h('frame', [h(pageToRender)])
  ).$start()

感谢您的帮助！

【参考方案1】：

我会以不同的方式处理它。

当用户登录时，您可以使用https://github.com/nativescript-community/preferences插件将其保存在设备上，如下所示：

function successLoginUser()
  const prefs = new Preferences();
  prefs.setValue("isUserLogin", true);

然后在启动应用程序时，您可以执行以下操作：

import Vue from 'nativescript-vue'
import store from './store'
import Home from './components/Page/home.vue'
import Login from './components/Page/login.vue'
import VueDevtools from 'nativescript-vue-devtools'

//This
const prefs = new Preferences();
const pageToRender = prefs.getValue("isUserLogin") ? Home: Login ;


if(TNS_ENV !== 'production') 
  Vue.use(VueDevtools)


// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

new Vue(
  store,
  render: h => h('frame', [h(pageToRender)])
).$start()

当用户退出时：

const prefs = new Preferences();
prefs.setValue("isUserLogin", false);

没试过，应该可以的

【参考方案2】：

//for me here firebase is imported from a diffrent file where i already initialized it.
let app;
firebase.auth().onAuthStateChanged((user, error) => 
    //decide which page to render
    //also make sure both components you are trying to render are imported
    if (!app) 
        app = new Vue(
            router,
            store,
            render: (h) => h(PageToRender),
        ).$start()
    
);

【讨论】：

嗨，如果我尝试将 Vue 初始化函数移动到其他点（例如在函数内部，就像你在示例中所做的那样），我会在启动时收到错误：System.err: An uncaught Exception occurred on "main" thread. System.err: Unable to start activity ComponentInfoorg.nativescript.costhly/com.tns.NativeScriptActivity: com.tns.NativeScriptException: Calling js method onCreate failed System.err: Error: Main entry is missing. App cannot be started. Verify app bootstrap.跨度>