Защита маршрутизатора в Angular 8

Question

Я создал приложение, в которое пользователь вводит данные. В этом приложении я хочу реализовать защиту маршрутизатора, чтобы запретить пользователю вернуться на страницу, чтобы они не потеряли свои данные. Если пользователь нажимает кнопку "Назад" в браузере, страница перезагружается, а не возвращается?

Я думаю использовать canDeactivate, чтобы запретить доступ к предыдущей странице и Angular Location, чтобы определить, на какой странице находятся пользователи, а затем перезагрузить эту страницу. Но я не знаю, как это реализовать.

Answer 1

1. Создайте службу для CanDeactivate Guard.

Сначала вам нужно создать интерфейс, который будет объявлять canDeactivate метод и с помощью этого интерфейса вы создадите сервис, который будет действовать как canDeactivateохранник. Эта услуга определитcanDeactivate метод следующим образом:

deactivate.guard.ts:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

export interface CanComponentDeactivate {
  canDeactivate(): boolean;
}

@Injectable()
export class DeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): boolean {

    /*
    The return value would be true, unless the canActivate function, 
    defined on the component returns false,
    in which case the function will open a Dialog Box,
    to ask if we want to stay on the page or leave the page.
    */
    if (component.canDeactivate()) return true;
    else return confirm('You have unsaved changes!') ? true : false;

  }
}

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

2. Настройте службу CanDeactivate Guard в модуле маршрутизации приложений.

app.module.ts:

import { CanDeactivateGuard } from './can-deactivate-guard.service';

------
@NgModule({
  ------
  providers: [ 
    CanDeactivateGuard
  ]
})
export class AppRoutingModule { } 

3. Создайте метод canDeactivate() в своем компоненте.

formComponent.ts:

import { Component, HostListener } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { CanComponentDeactivate } from 'src/app/deactivate.guard';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements CanComponentDeactivate {
  saved: boolean;
  form: FormGroup;
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['']
    });
  }

  /* Prevent page reloading */
  @HostListener('window:beforeunload', ['$event'])
  canReload(e) {
    if (!this.canDeactivate()) e.returnValue = true;
  }

  submit = () => this.saved = true;
  canDeactivate = () => this.saved || !this.form.dirty;
}

4. Добавьте CanDeactivate Guard в компонентный маршрут в модуле маршрутизации.

Вам необходимо добавить наш CanDeactivate guard .ie DeactivateGuard к компонентному маршруту в модуле маршрутизации, используя атрибут canDeactivate.

app-routing.module.ts:

const routes: Routes = [
  {
    path: 'home',
    component: FormComponent,
    canDeactivate: [DeactivateGuard]
  },
  { path: 'next', component: NextComponent },

  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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