How do you initiate the flow from another page (that is not app.vue?)

[benscabbia]

Hi there.

Firstly thank you for the example project. I have been playing with it and it integrates flawlessly with my IS4 implementation! 😃

What I want to do is add a new home page with a 'login' button. When a user clicks the login button, it instigates the implicit flow (exactly like the project) and they get directed to the 'home' page (url/home).

I tried to:

• Start the flow by moving mounted logic into a function so I can call it programmatically - this did not work, as I suspect the mounted life cycle gets called multiple times and mapping a function to a 'login button' is not enough

I then tried:

• move the logic from app.vue into a new component i.e. login.vue.
• add login button to app.vue which links to login.vue (via router-link) and leave the rest untouched

Modify app.vue to have a link:

<template>
  <div>
      <div id="app">
         <router-link to="/login">Login</router-link>
        <router-view/>
      </div>
  </div>
</template>

Then in my routes:

{
    path: "/login",
    name: "Login",
    component: Login
},
{
    path: "/dashboard",
    name: "Home",
    component: Home
}

Now I'm unsure on how to progress from here and I'm wondering (after a few attempts) if I am just overcomplicating things...

Is there a simple/obvious way to just have a login page which then kicks off the flow?
Thanks in advance 😄

[junshangshui]

Hi there.

Firstly thank you for the example project. I have been playing with it and it integrates flawlessly with my IS4 implementation! 😃

What I want to do is add a new home page with a 'login' button. When a user clicks the login button, it instigates the implicit flow (exactly like the project) and they get directed to the 'home' page (url/home).

I tried to:

• Start the flow by moving mounted logic into a function so I can call it programmatically - this did not work, as I suspect the mounted life cycle gets called multiple times and mapping a function to a 'login button' is not enough

I then tried:

• move the logic from app.vue into a new component i.e. login.vue.
• add login button to app.vue which links to login.vue (via router-link) and leave the rest untouched

Modify app.vue to have a link:

<template>
  <div>
      <div id="app">
         <router-link to="/login">Login</router-link>
        <router-view/>
      </div>
  </div>
</template>

Then in my routes:

{
    path: "/login",
    name: "Login",
    component: Login
},
{
    path: "/dashboard",
    name: "Home",
    component: Home
}

Now I'm unsure on how to progress from here and I'm wondering (after a few attempts) if I am just overcomplicating things...

Is there a simple/obvious way to just have a login page which then kicks off the flow?
Thanks in advance 😄

you can try like this

<template>
<div>
 <div v-if=signedIn>
   <router-view />
 </div>
 <div v-else>
   <AnotherPage/>
 </div>
</div>
</template>

[benscabbia]

Ok I feel a bit silly... it was much simpler than I expected.

What caught me out was the method getSignedIn(){...}. I didn't carefully look at that method, but I assumed it would return a boolean to determine if the user is signed in or not... however:

getSignedIn() {
    let self = this;
    return new Promise((resolve, reject) => {
      mgr
        .getUser()
        .then(function(user) {
          if (user == null) {
            self.signIn();
            return resolve(false);
          } else {
            return resolve(true);
          }
        })
        .catch(function(err) {
          console.log(err);
          return reject(err);
        });
    });
  }

It is making a call to self.signIn();, which is what was confusing me all along since I assumed the method was simply checking if the user was logged in. I guess the method should have been called getSignedInAndSignInIfNot or something like that to make it obvious that the method does more than the name implies 😆

[benscabbia]

For those interested, I have a little demo project that achieved what I wanted