How to routing in another component when use canActivate()

Question

I want to navigate directly in here component ResetPassIdComponent whene I use canActivate(); Now, when I click for this component ResetPassIdComponent , my aplication navigate in first in /outsidelogin/login and in second in resetPasswordRequest/:id

export class AuthGuard implements CanActivate {
    constructor(private router: Router, private auth: LoginService) { }
    canActivate(): boolean {
        if (this.auth.isAuthenticated()) {
            return true;
        }
        this.router.navigate(['/outsidelogin/login']);
        return false;
    }
}

So in this canActivate() I have 2 conditions, first if I'm login and second if I'm not login navigate in this.router.navigate(['/outsidelogin/login']);

My routing.ts

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'fp', component: FirstPageComponent
      }
    ]
  },
  {
    path: 'outsidelogin',
    component: outsideloginComponent,
    children: [
      { path: 'login', component: LoginFirstComponent },
      { path: 'register', component: RegisterComponent },
    ]
  },
    { path: '', redirectTo: '/home/fp', pathMatch: 'full' },
    { path: 'resetPasswordRequest/:id', component: ResetPassIdComponent }
];

Please, Can you share with me any idea, how to solve my problem?

can you share (https://stackblitz.com) link with me because not properly get your point. — Abhishek, Dec 25 '18 at 09:38
I demonstrate this demo https://play.nativescript.org/?template=play-ng&id=PmLIFr&v=2 I want to add a conditions in AuthGuard, if I have a id in `resetPasswordRequest/:id` I want to navigate direct in `ResetPassIdComponent`. In my demo it is assumed that Id is 123 and should navigate directly to the component ResetPassIdComponent — web site, Dec 25 '18 at 10:07
Can you see my demo please github.com/binaau/auth_guard After installed, please click this link stackoverflow.com/questions/53921510 and open with app. In this moment you can see that application in first navigate in login component and in second in reset pass. I want to navigate directly in reset pass only when I click link. Thank you! — web site, Dec 27 '18 at 16:06

score 0 · Answer 1 · answered Dec 26 '18 at 06:29

0

First you need to get parameter in resetPasswordRequest/:id, if login get the parameter as follow and convert string to number. You have to store your authentication token in browser cache.

    // import in resetPasswordeRquest Component.
    import { Route, AcivatedRoute } from '@angular/router'; 

    // inside component class;
    id: number;
    constructor(private router: Router, private route: ActivatedRoute){
       this.route.paramMap.subscribe(params => {
          this.id = +params.get('id');   
       }           
    }

answered Dec 26 '18 at 06:29

phonemyatt

1,287
17
35

I can get parameter in resetPasswordRequest. Only I want to create a condition in canActivate if I have a ID my app navigate in resetPasswordRequest, else navigate in `this.router.navigate(['/outsidelogin/login']); Also, I have a aplication mobile in Nativescript ` – web site Dec 26 '18 at 09:03
why not use authguard in router? like "{ path: 'resetPasswordRequest/:id', component: ResetPassIdComponent, canActivate: [AuthGuard]}; – phonemyatt Dec 26 '18 at 10:19
I use that but nothing happens, is a similar problem. Because, in AuthGuard I don't have a condition that controller for this id – web site Dec 26 '18 at 10:24
correct me if i m wrong, 1. you have first page with login component & register component. 2. after login success, go to resetpasswordRequest component 3. after login fail, go to register component. One more thing is you should check not authunticated and return false rather than return true first. – phonemyatt Dec 26 '18 at 10:29
1. I have first page with login component & register component. . 2. After login succes go to (FirstPageComponent), else go to LoginFirstComponent . 3. In login Component I have a link that reset a password, when click button I send a link in my email, when I click a link from email, I want to go in ResetPassIdComponent. The problem is in this part. I click a link from email, open aplication and application in first go to LoginFirstComponent and in second in ResetPassIdComponent. I want to go directly in ResetPassIdComponent – web site Dec 26 '18 at 10:40
When my application is open my application go to FirstPageComponent, because this is a condition in AuthGuard. – web site Dec 26 '18 at 10:43
I try something like in this post https://stackoverflow.com/questions/53921510/how-to-execute-in-first-a-function-and-in-second-canactivate – web site Dec 26 '18 at 10:47
so the first condition in app is logged in? – phonemyatt Dec 26 '18 at 14:25
Can you see my demo please github.com/binaau/auth_guard After installed, please click this link stackoverflow.com/questions/53921510 and open with app. In this moment you can see that application in first navigate in login component and in second in reset pass. I want to navigate directly in reset pass only when I click link. Thank you! – web site Dec 27 '18 at 10:36

How to routing in another component when use canActivate()

1 Answers1