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

Question

我想通过 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()
}

感谢您的帮助！

Answer 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);

没试过，应该可以的

Answer 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()
    }
});