如何將用戶憑證包含在離子網頁的每個邊欄中

Question

我希望有一個邊欄可以顯示登錄用戶的名稱。我有一個顯示用戶所有詳細信息的帳戶頁面。這是帳戶頁面下方的打字稿代碼。

import { Component } from '@angular/core'; 
import { NavController, AlertController} from 'ionic-angular'; 
import {Headers} from "@angular/http"; 
import 'rxjs/add/operator/map'; 
import {Storage} from "@ionic/storage"; 

import { Global } from '../../providers/global'; 

@Component({ 
    selector: 'page-account', 
    templateUrl: 'account.html', 
}) 
export class AccountPage { 
    constructor(public navCtrl: NavController, 
       private storage: Storage, 
       public alertCtrl: AlertController, 
       public global: Global 
      ) 
    { 
     // 
    } 

    public ACCOUNT_URL = this.global.url + "/api/inspectors"; 
    credentials:any; 
    contentHeader = new Headers({"Content-Type": "application/json"}); 
    error: any; 
    user: any; 
    token_type: any; 
    access_token: any; 
    refresh_token:any; 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad AccountPage'); 
    this.getAccessToken(); 
    this.getAccount(); 
    } 

    getAccessToken(){ 
    this.storage.get('access_token').then((value) => { 
     this.access_token=value; 
    }); 
    } 

    getAccount(){ 
    this.storage.get('user').then((value) => { 
     this.user=value; 
    }); 
    } 

} 

這是我的html代碼。

<ion-header> 
    <ion-navbar color="danger"> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Account</ion-title> 
    </ion-navbar> 
</ion-header> 


<ion-content class="page-account"> 
    <ion-card> 
     <ion-item *ngIf="user"> 
      <ion-card-content text-wrap> 
      <h2>Name: {{user.name}}</h2> 
      <p>{{user.cellphone_no}}</p> 
      <p> Address: {{user.address}} </p> 
      <p> Email: {{user.email}} </p> 
      </ion-card-content> 
     </ion-item> 
    </ion-card> 
</ion-content> 

我想要做的是刪除帳戶頁面，並將用戶的詳細信息放在邊欄的頂部。所以我必須將它放到app.html或app.ts中，但是如何在我的根組件中定義屬性才能顯示該用戶的詳細信息。

這裏是我的app.component.ts

import { Component, ViewChild} from '@angular/core'; 
import { Nav, Platform } from 'ionic-angular'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 

import {Storage} from "@ionic/storage"; 

import { LoginPage } from '../pages/login/login'; 
import { AccountPage } from '../pages/account/account'; 
import { InspectionPage } from '../pages/inspection/inspection'; 

@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage:any = LoginPage; 
    @ViewChild(Nav) nav: Nav; 
    pages: Array<{title: string, component: any, icon: string, color: string}>; 
    constructor(platform: Platform, 
       statusBar: StatusBar, 
       private storage: Storage, 
       splashScreen: SplashScreen) { 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     statusBar.styleDefault(); 
     splashScreen.hide(); 
    }); 

     // used for an example of ngFor and navigation 
    this.pages = [ 
     //{ title: 'Home', component: HomePage, icon: 'home', color: 'primary' }, 
     { title: 'Home', component: InspectionPage, icon: 'home', color: 'danger' }, 
     { title: 'Account', component: AccountPage, icon: 'person', color: 'primary' } 
    ]; 
    } 

    openPage(page) { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.nav.setRoot(page.component); 
    } 
    logout() { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.storage.remove('access_token'); 
    this.storage.remove('username'); 
    this.storage.remove('data'); 
    this.storage.remove('user'); 
    this.nav.setRoot(LoginPage); 
    } 
} 

下面的代碼，這裏是我的sidemenu或HTML代碼。

<ion-menu [content]="content" id="myMenu"> 
    <ion-header> 
    <ion-toolbar color="danger"> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     <ion-icon [name]="p.icon" [color]="p.color" item-left></ion-icon> {{p.title}} 
     </button> 
     <button menuClose ion-item (click)="logout()"> 
     <ion-icon name="log-out" color="default" item-left></ion-icon> Logout 
     </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --> 
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

我希望發生的是把用戶的詳細信息在側邊欄像我的帳戶頁面一樣。對不起，我很長的問題。我試圖尋找它，但找不到任何答案。

尋求幫助。 在此先感謝。

Answer 1

在你登錄頁面，當用戶成功登錄後，將數據存儲到localStorage的

login(username,password){ 
    this._api.userLogin().subscribe(res => { 

     if(res.status == 'ok'){ 
     localStorage.setItem('user_first_name', res.user_first_name); 
     localStorage.setItem('user_last_name', res.user_last_name); 

    } 
} 

然後在app.component.ts從localStorage的

this.first_name = localStorage.getItem('user_first_name'); 
this.last_name = localStorage.getItem('user_last_name'); 

獲取數據

顯示數據在app.html

<p>{{first_name}}</p> 
    <p>{{last_name}}</p> 

在註銷明確的localStorage

logout(){ 
    localStorage.clear(); 
} 

Answer 2

我建議你創建一個服務來處理用戶登錄的狀態。這樣一來，國家就處於中心位置，維護起來會容易得多。

一種可能的方法是在您的服務中使用BehaviourSubject，然後您可以在需要用戶對象的每個頁面（如帳戶頁面和應用程序組件）上訂閱。

import {Injectable}  from '@angular/core' 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class UserService { 
    // Observable user object (replace any with your user class/interface) 
    private _userObject = new BehaviorSubject<any>({}); 

    // Expose an observable that can be used by components 
    userObject$ = this._userObject.asObservable(); 

    // Method to update the user 
    changeUser(user) { 
    this._userObject.next(user); 
    } 
} 

您現在可以使用這樣的服務（你必須實現在每個組件要訪問您的用戶訂閱邏輯）：

import {Component} from '@angular/core'; 
import {UserService} from './user.service'; 

@Component({ 
    selector: 'account-page' 
}) 
export class AccountPage { 
    user: any; 
    subscription: Subscription; 
    constructor(private _userService: UserService) {} 
    ngOnInit() { 
    this.subscription = this._userService.userObject$ 
     .subscribe(item => this.user = item); 
    } 

    ngOnDestroy() { 
    // prevent memory leak when component is destroyed 
    this.subscription.unsubscribe(); 
    } 

    login() { 
    this._userService.changeUser({ 
     name: 'Name' // Replace with name/user object 
    }); 
    } 

    logout() { 
    this._userService.changeUser({}); 
    } 
} 

正如上面提到的，大優點是可維護性。如果您更改了用戶對象，只需要很少的更改，而由@Tomislav Stankovic提供的解決方案需要對使用該用戶的每個組件進行更改。