CODEWITHSUNDEEP
angularangular-routing
Always_a_learner
Always_a_learner

Reputation: 5055

how to restrict users to directly load url in angular app

There is url say:

students/student-profile/:id

I don't want users to go to this url directly. Instead If they try loading it directly I want to navigate to 'students/my-students'.

To achieve this I have created a service called previousRouteService:

    import { Injectable } from '@angular/core';
    import { Router, RouterEvent, NavigationEnd } from '@angular/router';


    @Injectable()
    export class PreviousRouteService {

      private previousUrl: string = undefined;
      private currentUrl: string = undefined;

      constructor(private router : Router) {
        this.currentUrl = this.router.url;
        router.events.subscribe(event => {
          if (event instanceof NavigationEnd) {        
            this.previousUrl = this.currentUrl;
            this.currentUrl = event.url;
          };
        });
      }

      public getPreviousUrl(){
        return this.previousUrl;
      }

  canNavigateToProfile()
  {
    console.log('this.previousUrl', this.previousUrl)
    if(this.previousUrl === 'students/my-students')
    {
      return true
    }
    else
    {
      this.router.navigate(['students/my-students']);
      return false;
    }
  }


    }

then Created a gaurd within src/app/gaurds/post-login/student-profile/student-profile.gaurd.ts:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { PreviousRouteService } from '@app/services';

@Injectable()
export class StudentProfile implements CanActivate {

  constructor(private previousRoute: PreviousRouteService
    ) { }

    canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

      return this.previousRoute.canNavigateToProfile();
    }
}

In lazyloaded module file:

     path: 'student-profile/:id',
        canActivate: [StudentProfile],
        loadChildren: 'app/views/student-post-login/student-profile/student-profile.module#PatientProfileModule'

@NgModule({
  imports: [
  ......
  ......
  providers: [studentProfile]
})

But when I try to navigate to student-profile/:id route through my-students route:

core.js:1448 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[studentProfile -> PreviousRouteService]: StaticInjectorError(Platform: core)[studentProfile -> PreviousRouteService]: NullInjectorError: No provider for PreviousRouteService! Error: StaticInjectorError(AppModule)[studentProfile -> PreviousRouteService]: StaticInjectorError(Platform: core)[studentProfile -> PreviousRouteService]: NullInjectorError: No provider for PreviousRouteService!

If I remove usage of previousRouteService from patient-profile gaurd then this error goes away.

What could be the reason for this error and what is the best way to achieve such restriction where user can navigate to url abc through url xyz else should be navigated to the xyz.

Upvotes: 0

Views: 421

Answers (4)

masera ngelekanyo
masera ngelekanyo

Reputation: 53

I'm not sure if I understand your question. but how about you check if id is null on your constructor? if is null then redirect to my-students?

Upvotes: 0

Chester mi ni&#241;o
Chester mi ni&#241;o

Reputation: 91

If I understand rightly, you must declaring into providers where you are using it and exports, then you must declaring it into imports where you want to use it.

example:

exampleCreate.module:

@NgModule {
providers: [yourservice],
exports: [yourservice]
}

exampleWhereUse.module:

@NgModule {
imports: [exampleCreate.module]
}

Upvotes: 0

Aniket Avhad
Aniket Avhad

Reputation: 4145

If you are using angular 6 then use below code or if you are using below version then yu have to add in there particular module in Providers,

import { Injectable } from '@angular/core';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';


@Injectable({
    providedIn: 'root'
})


 export class PreviousRouteService { }

Upvotes: 0

Fartab
Fartab

Reputation: 5503

add PreviousRouteService to providers of your AppModule (app.module.ts)

@NgModule({
  imports: [
  ......
  ......
  providers: [studentProfile, PreviousRouteService  ]
})

Upvotes: 1

Related Questions