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でログインしていない場合の場合分けをすれば良い。

 

 

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/components/home/Home'

import firebase from 'firebase'

 

Vue.use(Router)

 

const router = new Router({

routes: [

   {

      path: '/',

      name: 'home',

      component: home,

  meta: {

      requiresAuth: true

             }

     }

   ]

})

 

// ここがルートガード

router.beforeEach*1{

// ユーザログインのチェック

let user = firebase.auth().currentUser

if (user) {

next()

} else {

next({

name: 'Signin'   //今回は書いていないが、Signinコンポーネントに飛ぶ

 })

}

} else {

// ルートの認証を設定していない場合はこっち

next()

}

})

export default router

 

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

 

参考:

stackoverflow.com

medium.com

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

 

 

*1:to, from, next) {

// ルート認証があるかチェック

if(to.matched.some(rec =rec.meta.requiresAuth