Angular 5 - загрузка данных из URL в провайдера, чтобы они были доступны везде в приложении - PullRequest
Новая
       34

Angular 5 - загрузка данных из URL в провайдера, чтобы они были доступны везде в приложении

1 голос
/ 12 марта 2019

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

У меня есть следующий провайдер. Он захватывает параметр входящего запроса и анализирует его в интерфейсе. 

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MyObject } from './data.d';

@Injectable()
export class DataProvider {

    constructor(private route: ActivatedRoute) { }

    public get() {
      debugger;
      this.route.queryParams.subscribe(params => {
        let payload = params['data'] !== undefined ? Base64.decode(params['data']) : null;
        return payload ? <MyObject>JSON.parse(payload) : null;
      });
    }
}

У меня проблемы с синтаксисом того, как добавить это в массив моего провайдера и как получить к нему доступ из других мест в приложении (в частности, для защиты маршрутизации). Как правильно это настроить?

РЕДАКТИРОВАТЬ: Кажется, что, возможно, параметры запроса не доступны во время инициализации поставщика. Где можно проанализировать параметр запроса в месте, отличном от компонента? Мне нужно иметь доступ к нему в охране маршрутизации.

app.guard.ts : 

import { Injectable } from '@angular/core';
import { Router, RouterStateSnapshot, ActivatedRouteSnapshot, CanActivate } from '@angular/router';
import { SessionService } from './services/session.service';
import { DataProvider } from './data.provider';

@Injectable()
export class SessionIsValidGuard implements CanActivate {

    constructor(
        private router: Router, private sessionService: SessionService, private dataProvider: DataProvider
    ) {}

    /*
    * Main guard to verify that session ID is valid before proceeding
    */
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      // When the below is called, dataProvider.get() returns null
      let params = this.dataProvider.get();
      if (this.sessionService.isValidSessionId(params.transactionId)) {
        return true;
      } else {
        this.router.navigate(['/error', { error: 'Invalid session' }]);
      }
    }
}

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { DataProvider } from './data.provider';

/*
* Main app component that houses all views.
*/
@Component({
    selector: 'app-comp',
    templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {

    constructor(private router: Router, private route: ActivatedRoute, private srcService: SRCService, private dataProvider: DataProvider) {}

    ngOnInit() {
      // Here dataProvider.get() returns the expected value
      console.log(this.dataProvider.get());
    }
}

Ответы [ 4 ]

1 голос
/ 12 марта 2019

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

А в AppModules.ts это выглядит так 

@NgModule({
  imports: [
    CommonModule,

  ],
  exports: [],
  declarations: [],
  providers: [

    AdminAuthGaurd,

  ]

})

RoutGaurd.ts должен выглядеть следующим образом 

export class AdminAuthGaurd implements CanActivate {
    constructor(private authService: AuthenticationService, private router: Router) { }
    canActivate(): boolean {
        if(this.authService.getUserpermissions()==="Admin"){
                return true;
        }
        else{
            this.router.navigate(["/login"]);
        }

    }
}
1 голос
/ 12 марта 2019

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

Так что вы можете прочитать о том, как обрабатывать это здесь https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

1 голос
/ 12 марта 2019

Вы можете просто пойти с 

@Injectable({
    providedIn: 'root'
})

чтобы ваш провайдер был доступен везде.

0 голосов
/ 12 марта 2019

Импорт службы DataProvider в файл app.module.ts 

@NgModule({
   providers: [DataProvider]
})

Затем вы можете получить к нему доступ из других компонентов 

constructor(private dataProvider: DataProvider)

this.dataProvider.get();

РЕДАКТИРОВАТЬ: декодировать URL-адрес в защите маршрутизации только один раз, а затем использоватьтакже в компоненте.

Доступ к параметру запроса в файле защиты маршрутизации: 

export class RouteGuard implements CanActivate {
   public params: any;
   canActivate(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | 
     boolean {
        this.params = route.queryParams;
        if (this.sessionService.isValidSessionId(params.transactionId)) {
           return true;
        } else {
           this.router.navigate(['/error', { error: 'Invalid session' }]);
        }
     }

     get() {
         let payload = this.params['data'] !== undefined ? 
         Base64.decode(this.params['data']) : null;
         return payload ? <MyObject>JSON.parse(payload) : null;
       });
     }
}

Используйте этот метод декодирования для компонента 

constructor(private routeGaurd: RouteGaurd)

this.routeGaurd.get();
...