Best way to handle auth before showing tab?

1

Hey all,

I’m wondering the best way to solve my problem. I have an app with four tabs, three of which require a user to be signed in. I’m currently using this for each tab:

<f7-page @page:tabshow="checkAuth"> 

checkAuth() {
  if (store.state.user.loggedIn) {
    this.loggedIn = true;
  } else {
    this.loggedIn = false;
    this.$f7router.navigate("/login-screen-page/", { animate: false, props: { page: "test" } });
  }
},

There’s a couple of problems with this, mostly around the view being replaced by the login screen. ie. you click into each tab 2, 3 or 4, but you sign in on one of them. The other tabs have had the views replaced with the login screen.

What would be a better to handle this? Ideally, I could do a beforeEnter resolve query like for pages, but don’t that works in this situation.

Thanks,
N.

2

I would better to show different layouts

Option 1:

  • if not user logged in, show Single View with the content of your Tab 1 page + Login button somewhere
  • and on login replace App’s component content with Views-Tabs (and Tabbar)

Option 2:

  • open login screen not as a page but as an overlay
  • on login, do the same Replace App’s Views-Tabs component with different (give it a different key) on login, and it will reload the views and their pages
2 Likes
3

Thanks, @nolimits4web - appreciate your input!

Both good options. I think I’ll go implement the second as there is less cognitive load on the user if the menu options change. Something to A/B test in the future anyway…

4

I personally would use two routes, one for the loggedIn “State” and one for the unlogged State this way unlogged people can’t ever enter Pages from login

2 Likes
5

Great build! Thanks for feeding in!