前回に引き続き、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の公式ドキュメントを確認したところ、
注:
https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed-in_usercurrentUserが null になる原因としては、Auth オブジェクトの初期化が完了していないことも考えられます。オブザーバーを使用してユーザーのログイン ステータスを追跡している場合は、この状況に対処する必要はありません。
ということで今回の対応に至りました。
まとめ
今回は認証に関するルーティングについて纏めました。
- router.beforeEach でページ遷移時にチェックを行える
- firebase.auth().onAuthStateChanged で認証されているかがわかる
この2点を押さえれば、『特定のユーザーだけ◯◯させる』といった特殊なことも可能です。
ここまで読んで頂きありがとうございました！
コメント