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

如何解决Nativescript Vue - 渲染前 main.js 中的异步操作

我想使用 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,[h(pageToRender)])
  }).$start()
}

感谢您的帮助！

解决方法

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

当用户登录时，您可以使用 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);

我没试过，但应该可以