在ionic 2中如何实现登录流程？

Question

因此，我正在尝试从ionic 1开始使用ionic 2，并需要一些关于如何在我的项目中设置身份验证的指导。具体来说，我使用的是firebase和angularfire2。

作为一般方法，我应该：

a.检查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

a.检查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导入您刚刚创建的提供程序，然后检查身份验证状态

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);

这将不会在底部显示选项卡。

Answer 2

下面是一个使用本地存储中存储的jwt的离子登录流的示例：

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