login state with signInWithCustomToken shared with browser tabs

從 FireService 的 login 和 loginAsPublicUser 方法開始，尤其檢查它們對 angularFireAuth.signInWithCustomToken 和 signOut 的呼叫。檢查 AngularFire 的驗證進入點和瀏覽器持久化行為，以判斷是否支援獨立的分頁狀態。完成的標準是，帳戶擁有者工作階段和公開使用者工作階段在不同分頁之間保持隔離，且不會覆寫彼此的授權狀態。

Hi

I have an application built with angular fire.
How can I not share login state among tabs in a same browser ?

Application overview

I have a class 'FireService' to login with custom token.
And application let users to login two ways 'as account owner' or 'as public user'.
And if an account owner logins, FireService#login method will be called.
And if a public user logins, FireService#loginAsPublicUser method will be called.

Issue

With same browser but different tab, login as an account owner in a tab 'A' and login as a public user in a tab 'B', the login state was overridden with the public users's and he gets an error due to insufficient permission of firebase rules. Because the owner was trying to access as the public user and blocked by my firebase rules.

I checked the browsers log, after the account owner's stats was overridden, the authorization headers value to start session with firestore was the public user's not the account ownser's.
How can I use login state separately for users different tabs in a same browser?

curl 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2{project name}%2Fdatabases%2F(default)&RID=*****&CVER=*****X-HTTP-Session-Id=gsessionid&zx=*****&t=1' \
~~~
  -H 'x-client-data: CJ2EywE=' \
  --data-raw 'headers=*****Authorization%3ABearer%20eyJhbGciOiJSU*****'

@Injectable()
export class FireService {

~~~~

  public async login(roomId?: string): Promise<void> {
    if (roomId) {
      this.roomId = roomId;
    }
    const res = await this.serverClient
      .getFirebaseToken(this.roomId)
      .toPromise();

    this.accountId = this.serverClient.getAccountId();

    try {
      await this.angularFireAuth.signInWithCustomToken(res.firebaseToken);
      this.startTokenRefresh(true);
      this.loggedIn = true;
    } catch (error) {
      console.error(error);
    }
  }

  public async loginAsPublicUser(
    participantId: string,
    sharedRoomId: string,
    password: string
  ): Promise<void> {
    this.participantId = participantId;
    this.sharedRoomId = sharedRoomId;
    this.password = password;
    const res = await this.serverClient
      .getPublicFirebaseToken(
        this.participantId,
        this.sharedRoomId,
        this.password
      )
      .toPromise();

    try {
      await this.angularFireAuth.signOut();
      await this.angularFireAuth.signInWithCustomToken(res.firebaseToken);
      this.startTokenRefresh(true);
      this.loggedIn = true;
    } catch (error) {
      console.error(error);
    }
  }