Как запретить пользователю возвращаться на страницу входа при нажатии аппаратной кнопки «Назад» после входа в приложение Ionc4?

Question

Я занимаюсь разработкой приложения Ionic4. Итак, сначала у меня есть страница приветствия, в которой есть одна кнопка «Войти», которая при нажатии перемещается на страницу входа (используя this.navCtrl.navigateRoot ('/ login')). Когда пользователь входит в систему, панель инструментов отображается с помощью NavController в login.ts

    login() {
        this.loginService.login().subscribe(user => {

            this.navCtrl.navigateRoot('/dashboard');

        });
    }

На приборной панели я прописываю кнопку возврата в конструкторе:

    this.platform.backButton.subscribe( () => {

            if(this.router.url=='/dashboard')
                this.presentBackButtonAlert();
        }
    );

При нажатии кнопки появляется предупреждение, чтобы подтвердить, хочет ли пользователь выйти из приложения:

     presentBackButtonAlert() {
        this.alertCtrl.presentAlert({
            header: 'Exit?',
            buttons: [
              {
                text: 'No',
                role: 'cancel',
                handler: () => {
                }

              }, {
                text: 'Yes',
                handler: () => {
                    console.log('Confirm Okay');
                    navigator['app'].exitApp();
                }
              }
            ]

        });
     }

Проблема заключается в том, что, когда я нажимаю кнопку возврата оборудования, появляется предупреждение, но страница панели мониторинга возвращается на страницу приветствия.

Я ожидаю, что когда я вошел в систему (на странице Dashboard) и коснусь кнопки «Назад», появится только предупреждение, без перехода назад.

Вот мой AuthGuard:

    import { Injectable } from '@angular/core';
    import {AuthService} from '../authentication/auth.service';
    import {CanActivate} from '@angular/router';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthGuardService implements CanActivate{

        constructor(private authService: AuthService) { }

        canActivate(): boolean {
            return this.authService.isAuthenticated();
        }

  }

И вот как я использую его на модуле маршрутизатора:

    {path: 'login', loadChildren: './pages/Auth/login/login.module#LoginPageModule', pathMatch: 'full'},
    {path: 'dashboard', loadChildren: './pages/company/dashboard/dashboard.module#DashboardPageModule', canActivate: [AuthGuardService]},

Мой authState находится в AuthService и выглядит так:

     public authState = new BehaviorSubject(false);
     public isAuthenticated() {
        return this.authState.value;
     }

Answer 1

Во-первых, простое возвращение логического значения недостаточно в Guard. Вы также должны указать, на какую страницу вы хотите перейти, если условие, содержащееся в охране, не выполнено. так что вы можете активировать метод

import { Injectable } from '@angular/core';
import {AuthService} from '../authentication/auth.service';
import {CanActivate} from '@angular/router';
import { Router, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate{

    constructor(private router: Router, private authService: AuthService) { }

    canActivate(): boolean {
        if(this.authService.isAuthenticated()){
            this.router.navigate(['/whateverpage'])
            return false;
        }
        return true;
    }

}

Вы также должны добавить gaurd на страницу, на которую собираетесь перейти. Поскольку вы хотите запретить доступ к странице входа в систему после того, как пользователь вошел в систему, необходимо добавить на страницу входа

 {path: 'login', loadChildren: './pages/Auth/login/login.module#LoginPageModule' canActivate: [AuthGuardService]},
 {path: 'dashboard', loadChildren: './pages/company/dashboard/dashboard.module#DashboardPageModule'},