NativeScript Vue Auth based Navigation

Question

After trying for hours I gotta ask here, how can I have a simple Auth based Navigation inside my App?

I have a firebase auth user inside my vuex set by a auth listener, all good so far.

Now I simply wanna show the <Main /> screen when the user is signed in, otherwise I wanna show the <sign-in /> screen.

I tried a lot of solutions with v-if, a navigation on creation of the components etc. but did not find any example on how to accomplish this.

How I imagine it how it should work: App.vue

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

Answer 1

There is multiple way of approaching this. My prefer way is to create a custom router that uses the $navigateTo or modal navigation. You should see your app as multiple distinct page. Your router then can be something like

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

export default routes

then in your components

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

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

With this basic idea it is possible to add pre and post navigation rules and functions. You can also centralize all the routes and register them. Here it is an import but it can also be a plugins for vue.

You should have 1 login page, 1 loading page, 1 main page, ...

When the app start it always go to the loading where you decide to reroute depending on firebase auth state.