Prevent routing in Angular when user manually changes url in browser tab

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.

Solution 1

Its 2018! Angular 5 is here and so is the solution to this issue. BAMM its CanActivate Interface that a class can implement to be a guard deciding if a route can be activated.

We can add this functionality and prevent the access to some of our routes based on the conditions we define. A service for eg AuthGuard that implements the CanActivate interface and defines the canActivate method can be added to route configuration.

class Permissions {
  canGoToRoute(user: UserToken, id: string): boolean {
    return true;
  }
}

@Injectable()
class AuthGuard implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canGoToRoute(this.currentUser, route.params.id);
  }
}

If we have a route that we want to protect access to against some condition, we add the guard as follows:

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  {
    path: 'heroes',
    canActivate: [AuthGuard],
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

Here the route heroes and all its children have a layer of guard over it. Hence based on the boolean value returned by the AuthGuard service the user will be allowed or denied access to this route.

Solution 2

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] }

Solution 3

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.

Comments

[Peter]

Thanks for your solution but the thing is the user is authenticated, I just want to prevent him from accessing the states by manually changing the url. This way he may reach a state that should have got data from previous screen in sequence but because of abrupt routing it will be empty.

[SmartestVEGA]

i am getting a deadlock situation here

[tchap]

Please provide some context in your answer so the OP knows how your solution solves his/her problem

[Samrat Saha]

It is not a valid solution to the question asked.

[Samrat Saha]

How do you detect the navigation is triggered by url changes manually or internal router navigate method?

[Peter]

@SamratSaha you can check the userToken/Permisiions. If its available, then routing must be internal, else the same must be by entering route in url directly.

[Alejandro Araujo]

For the implementation I am doing I made a smalls changes to your proposal that avoided some problems with the onPopState. I declared the variable isNextStep in helper.ts as false: static isNextStep: boolean = false; and instead of calling location.onPopState (() => {...}); in the constructor directly I did the Helper.isNextStep = false; Which is working very well and now I have full control of the application because I can configure each of the pages to work or not with the guard.

[danted4]

@Alejandro Glad that this could help ! Thanks for adding this for the readers.

[vicnoob]

@VishalGulati This guard means that, if you already in the app, it still can directly input URL to navigate, is that right? EX: current in crisis-center, enter /heroes => successful

[Rakesh Chaudhari]

this.router.url this property does not exist, not working for me