Firebaseを使った認証を行う上でのVueルーティング

プログラミング
この記事は約3分で読めます。

前回に引き続き、Vue.js + Firebase で開発をしているのですが、ちょうど認証周りの動作検証を行ったので備忘録として残します。

認証構造

まずはどんなものを作るかのイメージの共有をしないことには分かりにくいので構造の説明をします。

今回は以下のようなフローで認証を行っていきます。

身近な例としてはTwitterです。

ログインされている状態で https://twitter.com/ に行くと、 https://twitter.com/home に自動的に遷移すると思います。今回はそれを作っていきます。

環境

開発環境ですが、以下のものを使います。

  • Vue Router (Vue version 2.9.6)
  • Firebase
  • Twitter API

で行っていきます。

Twitterの認証周りについては、今回説明しないので各所ブログを参考にしてください。

実装

今回実装が必要になるのは、

  • ログインページ(ログインボタン)
  • ダッシュボードページ(ログアウトボタン)
  • ルーティング処理

です。

ログイン

必要最低限のコードのみ書いています

HTMLでボタンひとつ作り、firebase.auth.TwitterAuthProvider() を呼び認証を行います。

ログアウト

ログアウトボタンもログインページと同様にボタンだけのシンプルなものにしています

ルーティング処理

今回のメインとなるルーティング処理です。Vue-Router の beforeEach を使っていきます。

src/router/index.js

router.beforeEach((to, from, next) でそれぞれ「遷移元」「遷移先」「処理」を表します。

firebase.auth().onAuthStateChangedでユーザーを取得し、取得できた場合は、認証済みとみなし、遷移先に移動させます。

今回は認証されている場合は、直接 /home に転送したいため、もしも トップページに行こうとしている人がいたら、next の処理で「homeのページに行け」ということを書いています。

逆にユーザーが取得できなかった場合は、未認証とみなし認証が必要なページに行こうとした場合は、そのページをリダイレクト先に登録した上でログインページに戻します。

引っかかった点

某記事を参考に進めていたのですが、

var user = firebase.auth().currentUser;

を使用すると認証をしていても user が null になってしまう問題が発生していました。

firebaseの公式ドキュメントを確認したところ、

注: currentUser が null になる原因としては、Auth オブジェクトの初期化が完了していないことも考えられます。オブザーバーを使用してユーザーのログイン ステータスを追跡している場合は、この状況に対処する必要はありません。

https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed-in_user

ということで今回の対応に至りました。

まとめ

今回は認証に関するルーティングについて纏めました。

  • router.beforeEach でページ遷移時にチェックを行える
  • firebase.auth().onAuthStateChanged で認証されているかがわかる

この2点を押さえれば、『特定のユーザーだけ◯◯させる』といった特殊なことも可能です。

ここまで読んで頂きありがとうございました!

コメント

タイトルとURLをコピーしました