Question

我正在构建一个使用AWS作为后端的离子应用程序（一直充满挑战！），由于某种原因在我的用户登录页面上，我得到了这个令人讨厌的错误，当我使用firebase作为后端。简而言之，我的侧边菜单包含应根据用户是否登录而显示的项目。如果用户已登录，则菜单应具有注销项。如果用户未登录，则菜单应该没有任何选项或冗余登录选项。

我遇到了困难的部分，即设置AWS Cognito以使用登录逻辑，并设置正确的根页，但是，在用户登录后，菜单不会显示注销选项。

有趣的是，如果我重新加载应用程序，菜单会显示注销选项。不知道为什么。同样奇怪的是，在我重新加载应用程序并单击注销按钮后，菜单中会出现未登录用户的正确选项。如果有人可以看看并告诉我为什么菜单选项只能在我退出时正确呈现，如果我只在我重新加载应用程序后登录，我将非常感激！提前谢谢您的时间！代码如下......

app.component.ts：

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

import { TabsPage } from '../pages/tabs/tabs';
import { SignInPage } from '../pages/sign-in/sign-in';
import { AuthService } from '../services/auth';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  rootPage: any;
  isLoggedIn //this variable holds the status of the user and determines the menu items;

  constructor(platform: Platform, 
              statusBar: StatusBar, 
              splashScreen: SplashScreen, 
              private menuCtrl: MenuController,
              private authService: AuthService) {

    this.verifyUserstate(); //method to check if a user is logged in
    console.log(this.isLoggedIn); //debug line
    console.log(this.menuCtrl.get()); //debug line

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

onLoad(page: any) {
 console.log("onLoad");
 this.nav.setRoot(page);
 this.menuCtrl.close();
}

onLogout() {
 this.authService.logout();
 this.verifyUserstate();
 this.menuCtrl.close();
}

verifyUserstate() {
  console.log("in verify userstate");
  this.authService.isAuthenticated()
  .then(() => {
    this.isLoggedIn = true; //if a user is logged in = true
    this.rootPage = TabsPage;
    console.log(this.isLoggedIn); // more debug
  })
  .catch((error) => {
    this.isLoggedIn = false; //if user is not logged in = false
    this.rootPage = SignInPage;
    console.log(this.isLoggedIn); //more debug
  });
 }
}

app.html：

<ion-menu [content]="nav">
<ion-header>
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <button ion-item icon-left (click)="onLoad(signinPage)" *ngIf="!isLoggedIn"> <!-- check isLoggin-->
            <ion-icon name="log-in"></ion-icon>
            Sign In
        </button>
        <button ion-item icon-left (click)="onLogout()" *ngIf="isLoggedIn">
            <ion-icon name="log-out"></ion-icon>
            Log Out
        </button>
    </ion-list>
</ion-content>

auth.ts：

import { Injectable } from "@angular/core";
import { AlertController } from "ionic-angular";
import { CognitoUserPool, AuthenticationDetails, CognitoUser, CognitoUserSession } from "amazon-cognito-identity-js";


const POOL_DATA = {
    UserPoolId: "xx-xxxx-X_XXXX",
    ClientId: "You do not need to know :)"
}

const userPool = new CognitoUserPool(POOL_DATA);

export class AuthService {

signin(email: string, password: string) {
    let message: string;
    var authenticationData = {
        Username : email,
        Password : password,
    };

    var authDetails = new AuthenticationDetails(authenticationData);
    let userData = {
        Username: email,
        Pool: userPool
    }

    let cognitoUser = new CognitoUser(userData);

    return new Promise((resolve, reject) => {
        cognitoUser.authenticateUser(authDetails, {
            onSuccess(result: CognitoUserSession) {
                console.log(result)
                resolve("Success!")
            },
            onFailure(error) {
                let message: string = error.message;
                reject(message);
            }
}

logout() {
    this.getAuthenticatedUser().signOut();
}

isAuthenticated() {
    return new Promise((resolve, reject) => {
        let user = this.getAuthenticatedUser();

        if (user) {
                user.getSession((err, session) => {
                    if(session.isValid()) {
                        resolve(true);
                    } else if (err) {
                        reject(err.message);
                    }
                })
        } else {
            reject("Not authenticated");
        }
    });
}

}

最后，sign-in.ts文件（登录的神奇之处）：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { LoadingController, AlertController } from 'ionic-angular';

import { AuthService } from '../../services/auth';
import { NavController } from 'ionic-angular/navigation/nav-controller';
import { MyApp } from '../../app/app.component';


@Component({
  selector: 'page-sign-in',
  templateUrl: 'sign-in.html',
})
export class SignInPage {

  constructor(private authService: AuthService,
              private loadingCtrl: LoadingController,
              private alertCtrl: AlertController,
              private navCtrl: NavController) {
  } 

  onSignin(form: NgForm) {
    const loading = this.loadingCtrl.create({
      content: "Signing you in..."
    });
loading.present();

this.authService.signin(form.value.email, form.value.password)
.then(data => {
  this.navCtrl.setRoot(MyApp); /*navigate to myApp again to reverify the 
                                *login status. This sets the right rootPage, 
                                *but I have a feeling here also lies the menu problem.
                                */
  console.log(data);
})
.catch(error => {
  console.log(error);
      let alert = this.alertCtrl.create({
        title: "Oops",
        message: error,
        buttons: ["Ok"]
      });

      alert.present();
    })
    loading.dismiss();
  }
}

用户登录时菜单项不以编程方式显示离子3。（AWS Cognito）

0 个答案: