如何限制用户直接在角度应用程序中加载网址

时间:2018-09-03 10:58:21

标签: angular angular-routing

有网址说:

学生/学生资料/:id

我不希望用户直接转到该URL。相反,如果他们尝试直接加载它,我想导航到“学生/我的学生”。

为此,我创建了一个名为previousRouteService的服务:

Optional.isPresent()

然后在src / app / gaurds / post-login / student-profile / student-profile.gaurd.ts中创建一个gaurd:

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


    }

在延迟加载的模块文件中:

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();
    }
}

但是当我尝试通过我的学生路线导航至“学生资料/:id”路线时:

  

core.js:1448错误错误:未捕获(承诺):错误:   StaticInjectorError(AppModule)[studentProfile->   PreviousRouteService]:StaticInjectorError(平台:   核心)[studentProfile-> PreviousRouteService]:       NullInjectorError:没有为PreviousRouteService提供程序!错误:StaticInjectorError(AppModule)[studentProfile->   PreviousRouteService]:StaticInjectorError(平台:   核心)[studentProfile-> PreviousRouteService]:       NullInjectorError:没有用于PreviousRouteService的提供程序!

如果我从患者档案gaurd中删除了对previousRouteService的使用,那么该错误就会消失。

造成此错误的原因可能是什么,而实现这种限制的最佳方法是用户可以通过url xyz导航到url abc,否则应该导航到xyz。

4 个答案:

答案 0 :(得分:1)

将PreviousRouteService添加到您的AppModule(app.module.ts)的提供商

I.description.attribute()

答案 1 :(得分:0)

如果您使用的是angular 6,则使用下面的代码,或者如果使用的是以下版本,则yu必须在 Providers

中的特定模块中添加
import { Injectable } from '@angular/core';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';


@Injectable({
    providedIn: 'root'
})


 export class PreviousRouteService { }

答案 2 :(得分:0)

如果我的理解正确,则必须在要使用它的位置向提供程序声明并导出,然后在要使用它的位置将其声明为导入。

示例:

exampleCreate.module:

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

exampleWhereUse.module:

@NgModule {
imports: [exampleCreate.module]
}

答案 3 :(得分:0)

我不确定我是否理解你的问题。 但是如何检查构造函数上的id是否为null?如果为null,则重定向到我的学生?