Question: I am stuck in a issue that happens when user manually changes the route in browser tab and presses enter. This forces my ui-router/angular2-router to navigate to the state entered by user. I want to prevent this and allow routing only through the flow I have implemented by button clicks in my website.

Answer: 
You can import router in the constructor of a guard. This router instance will have the current URL. ActivatedRouteSnapshot and RouterStateSnapshot in canActivate will contain the URL that the user is attempting to access.

The below example prevents users from directly accessing a route from an outside page.

```
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DirectAccessGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // If the previous URL was blank, then the user is directly accessing this page
    if (this.router.url === '/') {
      this.router.navigate(['']); // Navigate away to some other page
      return false;
    }
    return true;
  }
}

```

Add this guard to your routing module

```
{ path: 'signup/:type/:step', component: SignupComponent, canActivate: [DirectAccessGuard] }

```
Seems to be an old issue but I was also stuck here until I got just a thing working for my application.

What you can do to discourage direct browser url manipulation is :

1) Have a static boolean field in your application exported throughout.
Let's say it's Helper.isNextStep (save the file as helper.ts).

```
export class Helper {
static isNextStep: boolean; }

```

2) Set this static field to false on a page view (easily done in app.component.ts constructor) as : 

```
  import {Helper} from '../path/to/helper.ts' 

  export class AppComponent {
  constructor() {
  location.onPopState(() => {

    Helper.isNextStep = false;

    })
 }}

```

3) Have the canActivate guard set up like :

```
import { Helper } from '../path/to/helper.ts'
import { CanActivate } from '@angular/router/router';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(public zone: NgZone, public router: Router) {

}
canActivate(): boolean {
if (!Helper.isNextStep) {
  this.zone.run(() => {
    this.router.navigate(['']) //you can redirect user to any page here ( Optional )
  })
  return false;  //block navigation
}
else {
  return Helper.isNextStep || true;  // allow navigation
}
}

```

4) Have this canActivate guard provided in app.module.ts

```
providers: [ AuthGuard ]

```

and app.route.ts :

```
  {
path: 'step2',
component: ProductOverviewComponent,
canActivate: [AuthGuard]
},

```

After all this... you simply need to set the Helper.isNextStep equal to true wherever you will use navigation in your app. (For example a button click that calls a function, so before navigating simply set the static field to true )

```
someButtonClickFunction() {
    Helper.isNextStep = true;
    this.zone.run(() => {
        this.router.navigate(['/step1']);
    });
}

```

When the next page is loaded it will automatically be set back to false, not allowing url to change.