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: 
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.
The `$stateChangeStart` event is the proper place to handle this. This event will fire when you try to navigate to a `URL`. At that point you can check if the user is authenticated, and if not, bounce them back to login.

You would hook up the event like this :

```
angular
  .module('myApp')
  .run(function ($rootScope, $state, authFactory) {
    $rootScope.$on('$stateChangeStart', function () {
      //if user is not logged in
      if(!authFactory.isAuthed()){ 
        $state.go('login')
      }
    })
  });

```

Hope it helps.