かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

【Vue.js】【Firebase】routerを使ってログイン認証がないと見れないようにする設定方法

この記事をシェアする

この記事は、Vue.jsとFirebaseでログイン認証を実装した際、ログインしていないと見れない画面を設定したい場合のサンプルコードと解説です。

サンプルコードは、サーバーはFirebaseで、Vue-Routerを使っている前提で説明しています。

1.Vue-routerのログイン認証判定のポイントは「meta」と「requiresAuth」

ログイン判定が必要なパスだと設定するには「ルートメタフィールド(要するにmeta情報)」を利用します。

ルートメタフィールド | Vue Router

「router.js」にVue-routerのコードを記述していますが、そのrouterのパスの部分に「meta」としてユーザ情報の真偽情報を入れます。

例えば、pathは「/」で、コンポーネントは「name」場合なら以下のコードです。 

このように「meta」部分に「requiresAuth」を設定することで「このルートパス画面にはログイン認証がいるよ」と宣言しています。

2.「router.beforeEach」を設定することで画面遷移する前にログイン判定

先ほどのmeta情報に加えて「router.beforeEach(グローバルビフォーガード)」を使うことでログイン情報があるかどうかの判定をします。「router.beforeEach」は、routerで画面が遷移する前に働くので、もしログイン認証が必要なパスだった場合にログインしていなければ画面が表示しないようにできます。

ナビゲーションガード | Vue Router

パラメーターは「to,from,next」の三つです。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
  }
}

「to,from,next」は、名前の通りで

  • 「to」は遷移先のルート情報(次にナビゲーションされる対象のルートオブジェクト)
  • 「from」は遷移前の元のルート情報(ナビゲーションされる前の現在のルート)
  • 「next」は各処理に応じた情報

となります。

if (to.matched.some(record => record.meta.requiresAuth))

このコードの意味は、画面の遷移先が「meta」情報の「requiresAuth」がTrueになっている場合の処理(つまりログイン認証が必要な遷移先かどうか?)を書いています。

3.実際のサンプルコード

この処理に、elseでログインしていない場合の場合分けをすれば良いです。

関連記事: 

www.katonobo.com

www.katonobo.com

www.katonobo.com

www.katonobo.com

www.katonobo.com

www.katonobo.com

 

参考:

stackoverflow.com

medium.com

Vue.js 2.0 でログイン (vue-router で認証が必要な URL を定義) 

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js