目標

Motivation

VueとFirebaseを使ったアプリ開発を指導しているのだが、Firebase Authenticationを使ったログイン機能の作成において、Firebase Auth によるログイン状態の管理と Vuex を使ったアプリ全体での状態管理の２つを一度に手を付けようとすると重い。

Goal

Vue2系でログインの状態を簡単にアプリ全体で管理をするためのFirebase Authenticationを簡単にラップしたVue プラグインを作成する

設計

軽く Firebase Auth についての仕様を確認すると...

Firebase JS SDK の firebase/auth は firebase.auth().signInWithPopup() 等を呼び出すことで認証を行って、セッション情報をfirebase に保存してくれる。(クライアント側はどこに保存されてるんだろう?) そして、 firebase..auth().onAuthStateChanged() を使うことで、セッション情報を購読してくれる。

これをVueアプリ全体で状態管理したいので、firebase..auth().onAuthStateChanged() で購読したセッション情報を Vue.prototype に新しく $auth を追加して保存する。

各コンポーネントでは、this.$auth.currentUser などで現在の情報を読み込める様にする。

プラグインの作成方法

とりあえず、Vue.jsの公式docを読むとプラグインのページがある

プラグインは通常 Vue にグローバルレベルで機能を追加します。プラグインに対しては厳密に定義されたスコープはありません。プラグインはいくつかのタイプがあります:

とあるが、今回つくるプラグインは

4. Vue.prototype に記述することにより、1つまたは、複数の Vue インスタンスメソッドを追加します。

のタイプになる。

より具体的な作成方法

公式docのプラグインの記述を読み解くと、おそらくこう使う

Vue CLIプロジェクトの main.js で...

import Vue from 'vue'
import App from './App.vue'

const MyPlugin = new Object();
MyPlugin.install = function (Vue, options) { 
  Vue.prototype.$myMethod = function (methodOptions) {
    // 何らかのロジック ...
  }
}

// `MyPlugin.install(Vue)` を呼び出します
Vue.use(MyPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

この話題について力尽きたので Close