Angular2 restrict navigation to within app

Question

What I want to achieve is very basic here. In an Angular2 application, I have the following flow:

1. user goes to my app
2. the app shows an input view (/whatever) with inputs and all
3. user clicks on a save button
4. the app shows a summary view (/summary)

What I need is for the summary view to be accessible only by pressing the button on the input view. This means:

• the user gets redirected when on the summary view and reloading the page
• the user gets redirected when trying to access the summary view directly by typing the /summary url in the browser
• the user gets redirected when accessing the summary view from another page which is not input view

What I tried is to implement a safeGuard for the summary view using canActivate. The problem is, I can't find a way to get the previous url !

canActivate(route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot): boolean {
     // return previous_url == '/whatever'
     // how to find previous_url ???
}

Any help on how to get the previous url in a guard or another way to achieve this is welcome.

Answer 1

Hello You can check the condition in the summary component like this.

previousUrlSnapshot: string;

constructor(router: Router) {
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => {
    console.log('prev:', this.previousUrlSnapshot);
    this.previousUrlSnapshot = e.url;
    if(this.previousUrlSnapshot.includes('inputViewRoute')) // your Input Route
    {
       this.router.navigateByUrl("inputViewRoute");
    }
  });
}