Further actions after async route

Questions
1

Here I use async route. If user is not login, then open login screen. It’s working well now.

But further more, I need the original page to be open after login.

  1. In Page A, I tapped a link to Page B which needs authorization.
  2. With async route, it redirects to LoginScreen.
  3. Input username and password, tap submit, login successfully, then close LoginScreen.
  4. Now it’s back to Page A, but I need it to navigate to Page B automatically.

One possible solution is pass the route data(could get from async function’s routeTo) to LoginScreen page (but i still haven’t found how to do it), and after login, close LoginScreen and navigate to it. But i see that there is only hash, name, params, parentPath, path, query, route, url there. This is enough for normal case, but sometimes, I need something like animate, clearPreviousHistory, pushState.

Current solution:

  1. Still use async route. After login successfully, set a global variable of redirection (here I use vuex). This is from this.$f7route of login page. (for animate, clearPreviousHistory, … still no idea).

  2. When init app:

     on: {
   ScreenClosed() {
         if (self.$store.state.navigateToAfterLogin) {
           const url = self.$store.state.navigateToAfterLogin;
           self.$store.commit('setNavigateToAfterLogin', null);
           this.router.navigate(url);
         }
       },
     },
 },
 .....

So, how can I get this work?

2

I would suggest something more simple with just reloading current page after logging in:

var loggedIn = false;
...


{
  path: '/secured-page/',
  async(to, from, resolve, reject) {
    if (loggedIn) {
      resolve({
        component: PageB,
      });
    } else {
      resolve({
        component: LoginPage,
      });
    }
  },
}

And in login page just on login set logged in state

loggedIn = true;
$f7router.navigate('/secured-page/', { reloadCurrent: true })

And it will be reloaded to required page.

Handling loggedIn variable is up to you, is it a global window var or something in Vuex, etc