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

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

Vue.js+Vuex +firebaseでログイン機能を実装する場合はルートガードが便利

この記事をシェアする

vue.js、Vuex、firebaseで認証機能を使っている場合、以下の二つの記事を組み合わせるとfirebaseのログイン認証機能を使って簡単にルートガードできる。

Vue vuexでfirebaseのログイン保持 - Qiita

Vue.js でログイン機能を実装する - kz’s blog

ポイント

実装は上記二つの記事がとてもわかりやすいのでそちらを参照した方が良い。この記事では二つの機能を組み合わせるときに少しつまづくかもしれないのでその部分だけ。

ポイントは、Vuexで保持しているログイン判定をrouterガードでも使っている点。

 

firebaseのログインしているかどうかをstore.jsでこのように管理している。

store.js

getters: {
isSignedIn(state) {
return state.status;
},
}

(もちろんfirebase.jsでログインの判定をしている)

 

そのため、router.jsで、store.getters.isSignedInでtrueかfalseを返させて判定する。

 router.js

router.beforeEach*1 {
if (!store.getters.isSignedIn) {
next({
path: '/top', //requiresAuthが必要な画面で、ログインしていない場合はtopに飛ばす
})
} else {
next()
}
} else {
next()
}
})

export default router

 

この部分以外はほとんど問題なく実装できるはずです。

 

関連記事:

www.katonobo.com

www.katonobo.com

www.katonobo.com

*1:to, from, next) => {

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