Проверьте токен в Ionic 2

Если вы занимаетесь гибридными приложениями, возможно, вы знаете, что Ionic Framework — одно из лучших решений для этого. Почему это? Потому что он приносит вам много полезных визуальных и собственных компонентов, таких как камера, контакты, геолокация и многое другое.

Ionic 2 — это эволюция Ionic Framework, которая использует Angular 2 в качестве основного кода, но для вас это старые новости. Что вы действительно знаете, так это то, что не слишком много документации и как сделать что-то по-новому.

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

Это был мой вариант использования:

- Open the app and login in the form.
- Send to the server the user and password.
- The server response successful and return the JWT token with an expiration time.
- Navigate through the pages and check if the token is alive in any try.
- If token is not alive, redirect to the login page.

Чтобы сделать это, вы заметите события жизненного цикла, связанные с NavController, которые дают вам хуки, когда вы входите или покидаете страницы. При этом вы можете перед рендерингом новой страницы проверить, жив ли токен, и перенаправить или сделать что-то еще, если это не так. Одна из них — функция IonViewCanEnter. Он должен возвращать логическое значение или обещание, и оно ложно, . Я создал класс наследуемого компонента для выполнения функции goToPage и проверки токена:

import { NavController} from 'ionic-angular';
import { LoginPage } from '../pages/login/login';
import { LoginService } from '../providers/login-service';

export class SuperComponent {
   constructor(public loginService: LoginService, public navCtrl: NavController) { }
   protected goToPage(componentClass: any) {
       this.navCtrl.push(componentClass).catch(() => {
           //The push has failed
           this.navCtrl.setRoot(LoginPage);
       });
   }
   ionViewCanEnter() {
       return this.loginService.isAlive();
   }
}

Мы предположили, что this.loginService.isAlive() — это метод, который получает токен в локальном хранилище, декодирует его и проверяет дату истечения срока действия. Затем он возвращает разрешение или отклоненное обещание.

Когда вы вставляете страницу в NavController, и она терпит неудачу, вы можете поймать это и установить LoginPage как root. Сбой выполняется, когда ionViewCanEnter отправленной страницы возвращает false или отклоненное обещание.

Затем вам нужно расширить класс SuperComponent на страницах, которыми вы хотите управлять, внедрив LoginService и NavController:

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { SuperComponent } from '../../shared/supercomponent';
import { ContactPage } from '../contact/contact';
import { LoginService } from '../../providers/login-service';

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})

export class HomePage extends SuperComponent{

 constructor(public navCtrl: NavController, public loginService: LoginService) {
   //Injecting to the Supercomponent
   super(loginService, navCtrl);
 }

 goToContactPage(){
   this.goToPage(ContactPage);
 }
}

Когда ссылка запускает метод goToContactPage, она использует наследуемый метод goToPage. ContactPage также должен расширять SuperComponent, чтобы подключить ionViewCanEnter.

Еще одним полным вариантом для мобильных приложений является сохранение учетных данных в безопасном хранилище и попытка входа в систему автоматически, когда срок действия токена истек, или использование токена обновления, такого как OAuth2. Это связано с тем, что мобильные приложения должны регистрироваться один раз, а не каждый раз. Но не используйте уникальный и не истекающий токен, это плохая идея, которую можно взломать.