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

Posted 2023-04-13

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

【英文标题】：Nativescript Vue + Firebase auth: Best way to check if user auth'd in each component?Nativescript Vue + Firebase 身份验证：检查用户是否在每个组件中进行身份验证的最佳方法？

【发布时间】：2019-11-22 19:15:39

【问题描述】：

我开始制作 Nativescript Vue 应用程序，并实现了 Firebase 插件以使用身份验证系统。 在我的App.vue 文件中，我有一个如下所示的模板：

App.vue

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

在LoginComponent 中，当用户成功登录时，我会向父级发送一个事件以将loggedIn 更改为true，以便它显示MainAppComponent 并从那里启动常规应用程序流. 这是处理它的有效方法吗？有更好的方法吗？我很想看到一些输入。谢谢！

【问题讨论】：

不使用v-if，您可以根据条件语句导航到右侧组件（登录或主），将右侧组件返回到main.js中的框架

谢谢！每次我导航到嵌套在 MainComponent 之外的组件时，是否应该重新检查它们是否已登录，或者我可以假设它们是否进入 MainComponent 流，它们已登录，因此在手动注销之前它们都很好？

【参考方案1】：

你可以做两件事：

1.解决方案 像这样在main.js 上创建一个变量的原型：

Vue.prototype.$firebase.init()

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

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

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。 我希望这对您的项目有所帮助。