Question

我开始制作Nativescript Vue应用，并且实现了Firebase插件以使用身份验证系统。
在我的App.vue文件中，有一个看起来像这样的模板：

App.vue

<Page>
   <StackLayout v-if="!loggedIn>
       <LoginComponent />
   <StackLayout
   <StackLayout v-else>
       <MainAppComponent />
   <StackLayout
</Page>

在LoginComponent中，当用户成功登录时，我向父级发出事件，将loggedIn更改为true，以便显示MainAppComponent然后从那里开始常规的应用程序流程。这是一种有效的处理方式吗？有更好的方法吗？我希望看到一些意见。谢谢！

Answer 1

您可以做两件事：

1。解决方案
在您的main.js上原型变量，如下所示：

Vue.prototype.$firebase.init()

现在您可以在应用程序中的任何位置使用Firebase，例如：this.$firebase.getCurrentUser()

2。解决方案
类似于1.解决方案。将Firebase连接创建为原型。收听身份验证更改。并将状态存储在vuex存储或变量中。在此示例中，我使用您使用的变量loginIn。

Vue.prototype.loggedIn = false;
Vue.prototype.$firebase
    .init({
        onAuthStateChanged: function (data) {
            Vue.prototype.loggedIn = data.loggedIn
        }
    })
    .then(
        function (instance) {
            console.log("firebase.init done");
        },
        function (error) {
            console.log("firebase.init error: " + error);
        }
);

然后，您可以像这样在每个组件中访问此变量：this.$loggedIn。
希望对您的项目有所帮助。

Nativescript Vue + Firebase身份验证：检查用户是否在每个组件中进行身份验证的最佳方法？

1 个答案: