Как реализовать входной поток в ионном 2?

Question

Итак, я пытаюсь начать работу с ионным 2 из ионного 1 и вам нужно руководствоваться тем, как настроить аутентификацию в моем проекте. В частности, я использую firebase и angularfire2.

В качестве общего подхода я должен либо:

а. Проверьте сеанс/localStorage на app.ts и установите rootPage для входа в систему, если он не прошел проверку подлинности? Используя этот метод, если я выхожу из учетной записи пользователя и вернусь к корневой странице навигации, войдите в нее внизу.

b. Создайте страницу входа в систему как модальную, которая удаляет проблему с вкладками, появляющимися внизу, но я не уверен, что я должен уволить модал из app.ts, так как я не уверен, что приложение имеет корневой режим Я должен ссылаться.

Кроме того, следует ли настроить авторизацию и выход в систему как службу и реорганизовать ее, а не иметь ее на странице входа в систему и кнопку выхода из системы в контроллерах профиля?

Вот моя логика до сих пор с помощью метода A:

app.ts

export class MyApp { 
    rootPage: any; 
    local: Storage = new Storage(LocalStorage); 
    constructor(platform: Platform) { 
    this.local.get('user').then(user => { 
     if (user) { 
     this.rootPage = TabsPage; 
     } else { 
     this.rootPage = LoginPage; 
     } 
    }); 

    platform.ready().then(() => { 
     StatusBar.styleDefault(); 
    }); 
    } 
} 

И myProfile.ts

logout() { 
    this.local.remove('user'); 
    this.user = null; 
    let modal = Modal.create(LoginPage); 
    this.nav.present(modal); //should I set the rootPage instead? if so how do I remove the tabBar or set the rootpage of the containing app root page 
    } 

Answer 1

Вот пример ионного потока входа с JWT хранящиеся в местном хранилище:

https://github.com/RedFroggy/ionic2-nfc-app/tree/master/app/pages/login

Answer 2

a. Проверьте сеанс/localStorage на app.ts и установите для rootPage значение , если вы не прошли проверку? Используя этот метод, если я зарегистрирую пользователя, а вернет навигационную корневую страницу для входа в систему, вкладки отображаются на нижней части .

Вы можете использовать Angularfire2 Ионный поставщик, перейдите по этой ссылке для получения более подробной информации Angularfire2 Auth with Ionic

import { Observable } from 'rxjs/Observable'; 
import { Injectable } from '@angular/core'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
// Do not import from 'firebase' as you'll lose the tree shaking benefits 
import * as firebase from 'firebase/app'; 

@Injectable() 
export class AuthService { 
    private currentUser: firebase.User; 

    constructor(public afAuth: AngularFireAuth) { 
    afAuth.authState.subscribe((user: firebase.User) => this.currentUser = user); 
    } 

    getauthenticated(): boolean { 
    return this.currentUser !== null; 
    } 

    signInWithFacebook(): firebase.Promise<any> { 
    return this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()); 
    } 

    signOut(): void { 
    this.afAuth.auth.signOut(); 
    } 

    displayName(): string { 
    if (this.currentUser !== null) { 
     return this.currentUser.facebook.displayName; 
    } else { 
     return ''; 
    } 
    } 
} 

Тогда из App.ts Импортируйте Provider вы только что создали, а затем проверить состояние Auth

constructor(public authService: AuthService) { 
    let authState = this.authservice.getauthenticated(); 
    if (authState) { 
     this.rootPage = TabsPage; 
     } else { 
     this.rootPage = LoginPage; 
     } 
    } 

И, наконец, для выхода из эксплуатации Navigating from an Overlay Component

import { App } from 'ionic-angular'; 
constructor(
     public appCtrl: App 
    ) {} 

    setRoot(Page:any) { 
     this.appCtrl.getRootNav().setRoot(Page); 

Это не отображает вкладки внизу.