Как ограничить маршрутизацию от изменения в угловых 5 приложениях на базе условий? - PullRequest
Новая
       7

Как ограничить маршрутизацию от изменения в угловых 5 приложениях на базе условий?

0 голосов
/ 15 мая 2018

Я работаю над приложением angular 5 и сталкиваюсь с ситуацией, когда я работаю с компонентом, и я не хочу позволять пользователю переключать маршрутизацию до тех пор, пока он / она не ответит на вопрос, отображаемый в этом компоненте. После ответа на вопрос пользователь может переключить маршрутизацию и наслаждаться системой.

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Охрана классная штука, но если вам нужно только отключить ссылку, пока пользователь не ответит на вопрос, вы можете предоставить пустой маршрут с троичным оператором, чтобы отключить ссылку.

Учитывая, что вы храните ответ в переменной answer: 

<a [routerLink]="answer ? ['your', 'path'] : null">Continue</a>

Предоставление нулевых маршрутов отменяет маршрутизацию приложения, и средства защиты полезны, если вы хотите предотвратить маршрутизацию на определенных модулях, но только для одной ссылки ... Это излишне.

0 голосов
/ 15 мая 2018

Вы можете добиться желаемого поведения, используя auth guard в Angular 2 +.

Здесь - хорошая статья, которая объясняет, как вы можете заблокировать определенные маршруты на основе различных условий.

Обновление:

вы можете создать конфигурацию вашего маршрутизатора, как показано ниже. 

import { AuthGuardService as AuthGuard } from './auth/auth-guard.service';

export const ROUTES: Routes = [
  { 
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard] 
  }
];

Тогда ваш AuthGuardService должен выглядеть следующим образом: 

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

Следует отметить, что вы можете внедрить любой сервис в свой AuthguardService (сервис Injecting в другой сервис) и создать свою логику.

...