基于 NativeScript Vue Auth 的导航

Posted 2023-04-14

【中文标题】基于 NativeScript Vue Auth 的导航

【英文标题】：NativeScript Vue Auth based Navigation

【发布时间】：2020-11-10 16:49:50

【问题描述】：

尝试了几个小时后，我想在这里问一下，如何在我的应用程序中拥有一个简单的基于身份验证的导航？

我的 vuex 中有一个由身份验证侦听器设置的 firebase 身份验证用户，到目前为止一切正常。

现在我只想在用户登录时显示<Main /> 屏幕，否则我想显示<sign-in /> 屏幕。

我尝试了很多使用v-if 的解决方案、创建组件的导航等，但没有找到任何关于如何完成此操作的示例。

我如何想象它应该如何工作：App.vue

<template>
  <Page>
    <Frame v-if="user" id="main">
      <main />
    </Frame>
    <Frame v-else>
      <sign-in-page />
    </Frame>
  </Page>
</template>

【参考方案1】：

有多种方法可以解决此问题。我更喜欢的方法是创建一个使用$navigateTo 或模态导航的自定义路由器。您应该将您的应用程序视为多个不同的页面。然后你的路由器可能是这样的

let routes = 
   navigate(instance, routeName, options) 
      return instance.$navigateTo(routeName, options);
   


export default routes

然后在你的组件中

<script>
   import routes from '~/router'; // Path to your router

   router.navigate(this, LoginView, ) // use in methods
</script>

有了这个基本概念，就可以添加前后导航规则和功能。您还可以集中所有路由并注册它们。这里是导入，但也可以是 vue 的插件。

您应该有 1 个登录页面、1 个加载页面、1 个主页，...

当应用启动时，它总是会进入加载，您决定根据 Firebase 身份验证状态重新路由。