Làm cách nào để triển khai luồng đăng nhập trong ionic 2?

Question

Vì vậy, tôi đang cố gắng để bắt đầu với ion 2 từ ionic 1 và cần một số hướng dẫn về cách thiết lập xác thực trong dự án của tôi. Cụ thể là tôi đang sử dụng firebase và angularfire2.

Như một cách tiếp cận chung, tôi nên:

a. Kiểm tra session/localStorage trên app.ts và đặt rootPage để đăng nhập nếu chưa được xác thực? Sử dụng phương pháp này nếu tôi đăng xuất người dùng và đặt trang gốc nav trở lại đăng nhập, các tab được hiển thị ở dưới cùng.

b. Tạo trang đăng nhập dưới dạng phương thức loại bỏ vấn đề của các tab xuất hiện ở dưới cùng, nhưng tôi không chắc liệu tôi có nên kích hoạt phương thức từ app.ts vì tôi không chắc liệu bản thân ứng dụng có chế độ xem gốc hay không Tôi nên tham khảo.

Ngoài ra, tôi có nên thiết lập đăng nhập auth và đăng xuất dưới dạng dịch vụ và cấu trúc lại nó thay vì có trong trang đăng nhập và nút đăng xuất trong bộ điều khiển cấu hình không?

Dưới đây là logic của tôi vậy, đến nay sử dụng phương pháp 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(); 
    }); 
    } 
} 

Và trong 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

Dưới đây là một ví dụ về một luồng đăng nhập ion với một JWT được lưu trữ trong bộ nhớ cục bộ:

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

Answer 2

a. Kiểm tra phiên/localStorage trên app.ts và đặt rootPage thành đăng nhập nếu chưa được xác thực? Sử dụng phương pháp này nếu tôi đăng xuất người dùng và đặt trang gốc nav trở lại đăng nhập, các tab được hiển thị ở phía dưới .

Bạn có thể sử dụng nhà cung cấp Angularfire2 Ionic, Tới liên kết này để biết thêm chi tiết 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 ''; 
    } 
    } 
} 

Sau đó từ App.ts nhập các nhà cung cấp mà bạn vừa tạo và sau đó kiểm tra tình trạng Auth

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

Và Cuối cùng để sử dụng Đăng xuất Navigating from an Overlay Component

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

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

Điều này sẽ không hiển thị các Tab ở dưới cùng.