[SOLVED] Detect View in beforeEnter

Hello,

TL;DR : Is there a way to know in the “beforeEnter” method in which view the page is loading (and more specifically, to detect if it is in the currently visible view, or if it is an hidden view, like a closed panel, a “not current” tab, or any view currently hidden by a popup)

I’m working on a 3 tabbed app. When the user is not identified (because he logged out or he hasn’t logged in), I have the login-popup that shows off.

The routes to my different tabs are protected by a beforeEnter which checks if the user is logged in, and redirect to a “you are not authorized to access this page”.

So, when the user arrives on the app, he sees the login page, and the 3 invisible tabs try to load their respective pages, are stopped by the beforeEnter guard, and load the “auth required” page.

function checkAuth(to, from, resolve, reject) {
  const currentUser = firebase.auth().currentUser;

  if (!currentUser) {
    reject();
    this.navigate('/auth-required/');
  } else resolve();
}

Once my user successfully authenticated, the “user authentified” events reload all the tabs (and the guard does not stop it anymore), and close the login popup, revealing the app.

My issue is the following: if I switch tab, then it trigger on the new tab a “navigation” to nowhere.
I just observe the correct page moving away halfway, but no page appears on top of it.
A picture is worth a thousands words: https://pasteboard.co/Inpsc0z.png

I found a workaround: if I precise to my checkAuth function to navigate without doing the animation, then I have the correct behavior for this particular scenario (authentication on a popup with background reloading).

function checkAuth(to, from, resolve, reject) {
  const currentUser = firebase.auth().currentUser;

  if (!currentUser) {
    reject();
    this.navigate('/auth-required/', {
      animate: false
    });
  } else resolve();
}

But to have a really clean solution, I would prefer to disable the animation only if the navigation is triggered in a non visible view. Is there any way to detect the view in which happens the navigation, so I can compare if it is the same view than the app.views.current…

Thanks for your help!

beforeEnter: function(to, from, resolve, reject) {
  var router = this;
  var app = router.app;
  var thisView = router.view;
  var isInCurrentView = thisView === app.views.current;
}
1 Like

Thanks a lot!

This works as expected… except that the login-screen opened by the router is not considered the “views.current”! :stuck_out_tongue:

The views.current value is still the currently open tab hidden behind the login-screen.

Note that if I simply replace the <f7-login-screen> by <f7-popup>, then everything works as expected (=> the popup is correctly considered as the current view)

Is it the expected behavior for the login-screen?

My problem is solved (thank you again), so if this login screen not considered as the current view is not the expected behavior, feel free to ask me for opening a bug ticket :slight_smile:

Thanks again