2

I have this sign in method. when I try to the built in auth guard in my routing module, the sign in button needs to be clicked twice to be navigated to the next screen. But the console log string that i print shows up the first time. So it seems the the navigation is not working the first time.

If I click on sign in once and refresh the page, it takes me to the next page automatically as it shows I am signed it. So its just the router navigation thats not working the first time. I cannot figure out what went wrong. any idea?

sign in component

public signIn(email: string, password: string) {
this.authService.signIn(email, password)
  .then(() => {
    console.log("Signed In")
    this.router.navigate(["/control-panel"])
  })
  .catch(() => {
    this.errorText = this.sanitizer.bypassSecurityTrustHtml("Please enter valid email and password")
  })
}

Routing.module

const redirectLoggedInToControlPanel = () => redirectLoggedInTo(['/control-panel']);

const routes: Routes = [{ path: 'sign-in', component: SignInComponent, ...canActivate(redirectLoggedInToControlPanel) }]

Sign in html

<div class="row my-2">
    <div class="col-sm-12 text-center">
        <input type="button" class="btn" value="Log in"
            (click)="signIn(userName.value, userPassword.value)">
    </div>
</div>
Al Nafis
  • 127
  • 9
  • Why do you add additional command navigating to 'control-panel' in component.ts and in canActivate guard at the same time? Normally you might use only one of them. You should request navigating to 'control-panel' url only once. – LuDeveloper Dec 17 '20 at 22:30
  • I have added the router navigation inside signin method because that will navigate to thee next page after successful login. and the can activate auth guard is being used when user go to the sign in page, and if he is already authenticated, he will be redirected to the next page. I kinda need both of them – Al Nafis Dec 17 '20 at 22:55
  • Then it'd very nice to consider all the possibility based on your architecture and methods if you provide a link including these components. Following tools are very useful to provide the part of your app: https://stackblitz.com, http://plnkr.co – LuDeveloper Dec 17 '20 at 23:33

0 Answers0