Weird async issue during logout

@a19941 wrote:

Hi, i’ve recently been working on a ionic cordova project which uses firebase, and I have this strange error which keeps occurring whenever the logout function is executed. I keep getting a “ERROR Error: permission_denied at /profile/ihmMrHCdUQReyiqPnuVj4M3U9812: Client doesn’t have permission to access the desired data” error message whenever the user hits logout. I understand this is to do with an observable not being unsubscribed. I believe the problem lies within the app.html file, within the async data, as whenever I comment this code out the logout function works perfectly. The code is here:

app.html

<ion-list *ngIf="profileData | async; let profileData">
     <h5 class="menu_id">{{ profileData.username }}</h5>
     <h3 class="menu_id">{{ profileData.firstName }} {{ profileData.lastName }}</h3>
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
       {{p.title}}
     </button>
     <button (click)="logoutUser()">Logout</button>
    </ion-list>

app.component.ts

import { Component, ViewChild, OnDestroy } from '@angular/core';
import { Nav, Platform, App } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database-deprecated';
import { WelcomePage } from '../pages/welcome/welcome';
import { ProfilePage } from '../pages/profile/profile';
import { FriendsPage } from '../pages/friends/friends';
import { LoginPage } from '../pages/login/login';
import { SettingsPage } from '../pages/settings/settings';
import { TabsPage } from '../pages/tabs/tabs';
import { Profile } from '../models/profile';
import { Subscription } from 'rxjs/Subscription';

@Component({
  templateUrl: 'app.html'
})
export class MyApp implements OnDestroy {
  @ViewChild(Nav) nav: Nav;
  public userDetails : any;
  rootPage: any = WelcomePage;
  profileData: FirebaseObjectObservable<Profile>;
  pages: Array<{title: string, component: any}>;

  unsubbed: any;

  constructor(private afDatabase: AngularFireDatabase, private afAuth: AngularFireAuth, public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public app: App) {
    this.initializeApp();



// used for an example of ngFor and navigation
this.pages = [
  { title: 'My World', component: TabsPage },
  { title: 'Profile', component: ProfilePage },
  { title: 'Friends', component: FriendsPage },
  { title: 'Settings', component: SettingsPage }
];


 this.unsubbed = this.afAuth.authState.subscribe(data => {
  if(data){
    this.profileData = this.afDatabase.object(`profile/${data.uid}`);
  }
 });


 }

 ngOnDestroy() {
  this.unsubbed.unsubscribe();
 }

 initializeApp() {
  this.platform.ready().then(() => {
    this.statusBar.styleDefault();
    this.splashScreen.hide();
  });
 }

 openPage(page) {
  this.nav.setRoot(page.component);
 }

 logoutUser(){
  this.nav.setRoot(WelcomePage);
  this.unsubbed.unsubscribe();
  this.afAuth.auth.signOut();
 }

}

I understand the error, it is trying to access the database and is getting rejected because the user has been logged out. This is strange because as you can see, the observable is unsubscribed before the user is logged out. I’m fairly sure the problem lies within the html code and the async data there, as when I comment the html code out the application works perfectly. I’ve looked everywhere for help regarding this issue but can’t seem to find anything. Any help is greatly appreciated!

Posts: 1

Participants: 1

Read full topic