Как обеспечить безопасность и перемещаться между дочерними маршрутами?

#angular #location #angular-router

#angular #Расположение #angular-маршрутизатор

Вопрос:

В моем route приложении есть следующая Angular структура:

 path: ':piva/:negozio',
component: NegozioComponent,
children: [
  {
    path: '',
    component: ModuliComponent,
  },
  {
    path: 'location',
    component: LocationComponent
  },
  {
    path: ':type',
    component: ProductsComponent, 
    //I can access this only if 'location' is true
  },
  {
     path: 'item/:id',
     component: ItemComponent,
  },
];

Итак, мне нужно получить доступ к path :type только в том случае, location если в true запросе .get возвращается redirect , на странице местоположения есть поле ввода, в котором проверяется, находится ли позиция клиента в диапазоне магазина, который осуществляет поставки, если он находится в диапазоне, который я должен :type предоставить пользователю, чтобы он был в,.

Итак, я пытался сделать следующее в своем location.component при отправке:

 getLocation(): void {
  this.locationService
  .inRange(
    this.addressComponent.geometry.location.lat(),
    this.addressComponent.geometry.location.lng()
   )
  .subscribe((data: any) => {
    if (data.inRange) {
      this.router.navigate([
        'asporto',
        { relativeTo: this.activatedRoute },
      ]);
    }
  });
}

Но когда я пытаюсь отправить button , я получаю следующую ошибку в консоли:

 Error: Cannot match any routes. URL Segment: 'asporto; relativeTo = Route(url: 'location',  path:' location')'

1. Я бы рекомендовал вам иметь глобальный класс AuthGuard, а затем использовать его со свойством ‘canActivate’ в объявлении маршрута. Кроме того, вы не объявили путь ‘asporto’ в своем модуле маршрутизации..

Ответ №1:

Для решения этой проблемы вы должны использовать CanActivate Guard в своем :type пути и использовать locationService внутри этого. Итак, сделайте что-то вроде этого:

app.route.ts

 path: ':piva/:negozio',
component: NegozioComponent,
children: [
  {
    path: '',
    component: ModuliComponent,
  },
  {
    path: 'location',
    component: LocationComponent
  },
  {
    path: ':type',
    component: ProductsComponent, 
    canActivate: [locationGuard]
  },
  {
     path: 'item/:id',
     component: ItemComponent,
  },
];

местоположение-guard.service.ts

 import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { LocationService } from './location.service';

@Injectable()
export class LocationGuard implements CanActivate {

  constructor(public locationService: LocationService, public router: Router) {}
  canActivate(): boolean {
    this.locationService.inRange(
      this.addressComponent.geometry.location.lat(),
      this.addressComponent.geometry.location.lng()
     .subscribe((data: any) => {
       if (data.inRange) {
         this.router.navigate([`/type`]);
         return ture;
       }
       return false;
     });
  }
}