Объект существует со значением, но при доступе к свойству возвращается неопределенное

Question

я нахожу странные вещи. У меня есть AuthService, который сохраняет требования аутентификации моих приложений, включая токен аутентификации.

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl:ModalController,public auth: AuthService) {

  }

  ionViewDidLoad() {
    console.log(this.auth)
    console.log(this.auth.loggedIn)
    if(this.auth.loggedIn){
      console.log(this.auth);
      this.navCtrl.push("TabsPage");
    }    
  }
}

когда я звоню

console.log(this.auth)

он возвращает аутентификацию Бат, когда я звоню

console.log(this.auth.loggedIn)

, он возвращает ноль

это мой auth.service.ts

import { Injectable, NgZone, Component } from '@angular/core';
import { Storage } from '@ionic/storage';

// Import AUTH_CONFIG, Auth0Cordova, and auth0.js
import { AUTH_CONFIG } from './auth.config';
import Auth0Cordova from '@auth0/cordova';
import * as auth0 from 'auth0-js';

@Injectable()
export class AuthService {
  Auth0 = new auth0.WebAuth(AUTH_CONFIG);
  Client = new Auth0Cordova(AUTH_CONFIG);
  accessToken: string;
  user: any;
  loggedIn: boolean;
  loading = true;

  constructor(
    public zone: NgZone,
    private storage: Storage
  ) {
    this.storage.get('profile').then(user => this.user = user);
    this.storage.get('access_token').then(token => this.accessToken = token);
    this.storage.get('expires_at').then(exp => {
      this.loggedIn = Date.now() < JSON.parse(exp);
      this.loading = false;
    });

  }

  login() {
    this.loading = true;
    const options = {
      scope: 'openid profile offline_access'
    };
    // Authorize login request with Auth0: open login page and get auth results
    this.Client.authorize(options, (err, authResult) => {
      if (err) {
        throw err;
      }
      // Set access token
      this.storage.set('access_token', authResult.accessToken);
      this.accessToken = authResult.accessToken;
      // Set access token expiration
      const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
      this.storage.set('expires_at', expiresAt);
      // Set logged in
      this.loading = false;
      this.loggedIn = true;
      // Fetch user's profile info
      this.Auth0.client.userInfo(this.accessToken, (err, profile) => {
        if (err) {
          throw err;
        }
        this.storage.set('profile', profile).then(val =>
          this.zone.run(() => this.user = profile)
        );
      });
    });
  }

  logout() {
    this.storage.remove('profile');
    this.storage.remove('access_token');
    this.storage.remove('expires_at');
    this.accessToken = null;
    this.user = null;
    this.loggedIn = false;
  }

  isLoggedIn() :boolean{
    return this.loggedIn;
  }
}

Я использую аутентификацию ionic3 и auth0, ранее я думал, что я виноват в том, что не использовал публичный идентификатор в моей собственности. но когда я изменяю свойство на public или создаю метод получения, который возвращает свойство, оно все равно не работает вообще.

Answer 1

Это связано с тем, что консоль Chrome оценивает объект. Если вы откроете объект в консоли, вы увидите крошечный синий значок информации. Это скажет:

Значение было оценено только сейчас

В основном происходит то, что содержимое объекта изменилось между временем, когда вы зарегистрировали его, и временем, когда вы открыли его вваша консоль

Действие входа в систему является асинхронным, что означает, что свойство loggedIn объекта auth будет установлено после вызова ionViewDidLoad. Возможно, было бы неплохо установить аутентификацию внутри провайдера APP_INITIALIZER или иметь в вашей аутентификации некоторое Observable, на котором вы можете прослушивать изменения аутентификации

Answer 2

1. у вас есть colling this.loggedIn перед назначением, так что он не определен.
в вашем случае напишите console.log (this.auth.loggedIn) после входа в систему. пожалуйста, проверьте этот сценарий.

2.в данный момент присвойте некоторое значение переменной loggedIn, затем напечатайте, чтобы вывести значение

loggedIn: boolean; => loggedIn: boolean = false; , затем выведите значение, которое будет работать

в каком-либо другом компоненте

 ngOnInit() {
    console.log(this.auth.loggedIn)
  }