как ограничить пользователей прямой загрузкой URL в угловом приложении

Question

Есть URL сказать:

студентов / студент-профиль /: ID

Я не хочу, чтобы пользователи переходили на этот URL-адрес напрямую. Вместо этого, если они пытаются загрузить его напрямую, я хочу перейти к «студенты / мои студенты».

Для этого я создал сервис под названием 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;
    }
  }


    }

затем создал gaurd в 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();
    }
}

В файле загруженного модуля:

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

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

Но когда я пытаюсь перейти к профилю ученика /: id через маршрут моих учеников:

core.js: 1448 ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: StaticInjectorError (AppModule) [studentProfile -> PreviousRouteService]: StaticInjectorError (Платформа: core) [studentProfile -> PreviousRouteService]: NullInjectorError: Нет провайдера для PreviousRouteService! Ошибка: StaticInjectorError (AppModule) [studentProfile -> PreviousRouteService]: StaticInjectorError (Платформа: core) [studentProfile -> PreviousRouteService]: NullInjectorError: Нет поставщика для PreviousRouteService!

Если я уберу использование предыдущей службы маршрутизации из gaurd профиля пациента, эта ошибка исчезнет.

В чем может быть причина этой ошибки и каков наилучший способ достижения такого ограничения, когда пользователь может перейти по URL abc через url xyz, иначе следует перейти к xyz.

Answer 1

Я не уверен, что понимаю ваш вопрос. но как насчет того, чтобы проверить, является ли id пустым в вашем конструкторе? если ноль, то перенаправить на мои студенты?

Answer 2

Если вы используете angular 6, используйте приведенный ниже код или, если вы используете нижеприведенную версию, вам нужно добавить туда конкретный модуль в Поставщики ,

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


@Injectable({
    providedIn: 'root'
})


 export class PreviousRouteService { }

Answer 3

Если я правильно понимаю, вы должны заявить провайдерам, где вы их используете, и экспортировать, тогда вы должны объявить об импорте там, где вы хотите их использовать.

пример:

exampleCreate.module:

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

exampleWhereUse.module:

@NgModule {
imports: [exampleCreate.module]
}

Answer 4

добавить PreviousRouteService к поставщикам вашего AppModule (app.module.ts)

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