katonobo’s blog

プログラミング中心の雑記ブログ

 お知らせ

 プログラミングスクールの口コミサイト「プロログ」をリリースしました プロログ

 プログラミングに興味ある方はぜひご覧ください!  

 またスクールに通われたことがある方はぜひ口コミにご協力ください!お願いします!

【備忘録】【Vue.js】routeを使ってログインしてないと見れないように設定する方法

いわゆるRoute Guard。サーバーはFirebaseで、Vue-Routerを使っている前提。

 

ポイント:

・routeのパスの部分に「meta」として、ユーザ情報の真偽情報を入れる。

  例えば、pathは「/」で、コンポーネントは「name」場合

 { path: '/',

   name: 'home',

   component: home,

   meta: {

               requiresAuth: true

              }

}

 

 「beforeEach」を使うことでログインしているかしていないかの判定。パラメーターは「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.
  }
}

 

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

 

 

 

はてなは簡単にコードを載せる方法ないんですかね?これじゃわかりにくい…。 

(8/24 Githubで直せました。アドバイスいただきありがとうございました)

 

追記:9/5 Vue.jsとFirebaseを使ってウェブサービスを作成するために最適な学習教材を紹介した記事を書きました。価値ある情報になっていると思うので参考にして見てください。 

www.katonobo.com

ちなみに、上記の紹介記事で、個人的にはルートガードで一番わかりやすいのは、 

Build Web Apps with Vue JS 2 & Firebase

で、セクション6のレクチャー63です。セクション6をやればかなり理解深まります。

 

参考:

stackoverflow.com

medium.com

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