FirebaseのonAuthStateChanged関数でページを開いたときだけ、違う処理をしたい！

firebaseを使って漢字パズル的なサイトを作りたいなって思ったので、少しずつ作業を進めていたところ、あるささいな問題に出くわした。

認証時に表示するスナックバーがページを開いたときにも出てしまう。  

書いたままなんだけど、結構鬱陶しかったので、なんとか解消できないか試してみた。

// ページを開いたときにもスナックバーが表示されてしまうコード。
firebase.auth().onAuthStateChanged(function(user){
  if(user) {
    showSnacbar("認証されているよ");
  } else {
    showSnacbar("認証されていないよ");
  }
});

onAuthStateChanged関数の戻り値を使ってみたが…

まずは、 firebase.auth().onAuthStateChanged関数の戻り値を使うと登録した関数を取り除くことができるようなので、初回限定の関数を登録して、そこからはじめの処理を行う関数を登録するようにしてみた。が、ダメだった。

// ダメだったコード。
var unsubscribe = firebase.auth().onAuthStateChanged(function(user){
  unsubscribe();
  //ページを開いたときにはスナックバーを表示しないようにしたつもり
  firebase.auth().onAuthStateChanged(function(user){
    if(user) {
      showSnacbar("認証されているよ");
    } else {
      showSnacbar("認証されていないよ");
    }
  });
});

関数自体を取り除くことはできたが、onAuthStateChangedオブサーバーの発行中にfirebase.auth().onAuthStateChangedで関数を登録すると、その発行中に即座に呼び出されてしまうみたいだ。

そういえば、クロージャってあったよね(解決)

どうしようかと悩んでいたら、Javascriptにはクロージャがあるじゃないかと気づき、以下のコードを書いてみた。

// クロージャを使った成功例
var smartShowSnacbar = function() {
  var counter = 0;
  return function(user) {
    counter++;
    if (counter <= 1) { return ; }

    if(user) {
      showSnacbar("認証されているよ");
    } else {
      showSnacbar("認証されていないよ");
    }
  };
};
firebase.auth().onAuthStateChanged(smartShowSnacbar());

これで無事、目標を達成できた。クロージャを初めて習う人が見ることになるコードだけど、上手に活用できたのではないかと思う。