Angularfire2 listener/observer problem on logout

Ionic Framework ionic-v3
1

first of all my app already has an authentication process using angularfireauth.

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, listChanges } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class FirebaseProvider {

itemsRef: AngularFireList<any>;
items: Observable<any[]>;

constructor(public afDatabase: AngularFireDatabase, private afAuth: AngularFireAuth ) {
    
    this.itemsRef = afDatabase.list('/messages');
 
    this.items = this.itemsRef.valueChanges();

 }
 
}

and on my html…(can only be viewed once logged-in)

<ion-item *ngFor="let item of items | async">
    {{item | json}}
  </ion-item>

this successfully prints a list of my firebase database. however… when i click logout on my app i get the ff…

permission_denied at /messages: Client doesn’t have permission to access the desired data.

i had thoroughly searched google for answers. mostly saying to ‘unsubscribe’ from a listener/observer etc.
unfortunately nothing worked out.

and please don’t tell me to change my firebase rules to allow read and write to public.