Экран для авторизованных пользователей на Ionic

Время на прочтение: 5 минут.
На реализацию в проекте: 5 минут.

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

В сервисе отвечающим за авторизацию, реализовываем метод проверки:

guardAuth(): Observable<any> {
    const isAuth = new Subject();
    
    // читаем токен авторизации
    this.loadToken().then(token => {
        // если токена нет, отправляем на форму авторизации
        if (!token) {
            this.router.navigate(['/auth']);
        }
        // отправим результат наличия токена
        isAuth.next((token !== null));
        isAuth.complete();
    });
    
    return isAuth;
}

В модуле экрана (Page) добавляем свойство canActivate, получится так:

const routes: Routes = [
  {
    path: '',
    component: ChoiceTariffPage,
    canActivate: [StartGuard]
  }
];

Создаем guard:

ionic generate guard

который будет отвечать за переход на этот экран:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { ServerService } from './service/server.service';

@Injectable({
  providedIn: 'root'
})
export class StartGuard implements CanActivate {
  path: ActivatedRouteSnapshot[];
  route: ActivatedRouteSnapshot;

  constructor(
    public server: ServerService
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    return this.server.guardAuth();
  }
}

Теперь при переходе на экран ChoiceTariffPage, если пользователь не авторизован, будет направлен на /auth.

Эта запись была отмечена тегом . Закладка ссылка.