Best way to handle auth before showing tab?

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.


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

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…

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


Great build! Thanks for feeding in!