「ログイン済みのユーザーのみがページにアクセスできるようにしたい!!」Nuxt.jsでアクセス制御を行う

1.環境

Vue.js 2.6.11
npm 6.14.7
Nuxt.js 2.11.0
firebase 8.6.0

2.方向性

Vue.jsでVueXを使ってアクセス制御の構築にめっちゃ時間がかかってるエラです。

今はNuxt.jsを使いながらVueを触っているのですが、アクセス制御をするなら、VueXで状態管理をしながら、layout/default.vueでユーザーの有無をmountedで確認して、ユーザーがいない場合layout/default.vueの<Nuxt />という部分を非表示にするという方法があるみたいです。

ナビゲーションガードと言うやり方もあるみたいなのですがNuxt.jsでそれはできないとのこと。
うーん何でなんでしょう??
詳しいことは知らね。

ただ上記のやり方を実行する上でいくつか基本的なことを理解しておかなければいけないみたいです。

3.VueXとはなんぞや

こちらの記事がわかりやすかったので引用させてもらいます。
[【Nuxt.js】Vuexまとめ編：はじめる前に、簡単理解！]
(https://note.com/aliz/n/n6f4a42bce5b5)

VueXには大事な要素が4つあります。

順番に
・state: data保管庫
・getters: stateの情報を取得
　　　　　別gettersの呼び出しも可能
・actions: storeの上書き以外の処理や非同期通信
　　　　　別actionsの呼び出しも可能
・mutations: stateの上書き(代入)
となります！
actionsとmutationsが
methodsのような役割をしています。

4.実践

……というわけで早速実践してみました。

layout/default.vue

<script>
import Header from "@/components/Header"

export default {
  components: {
    Header,
  },
  mounted() {
    this.$fb.auth().onAuthStateChanged((user) => {
      if (user) {
        // 通常のページが表示される処理を書く
      } else {
        // サインインページが現れるような処理を書く
      }
    })
  },
}
</script>

store/users.js

// 現在のストアオブジェクトの状態
export const state = () => {
  return {
    users: [],
  }
}

// ストアの状態は、ミューテーションによってのみ変更される。
// ミューテーションはタイプとハンドラを持ち、ハンドラ関数は直接実行することができない。
// 実行するためには、store.commitをタイプを指定して呼び出す必要がある。
// また、ハンドラ関数は非同期処理を行なってはならない。
export const mutations = {
  ADD_USER(state, user) {
    state.users.unshift(user)
  },
  LOAD_USER(state, users) {
    state.users = users
  },
}

// FireStore からデータを読み込むための、action
export const actions = {
  async getUsers({ commit }) {
    const db = this.db
    const result = await db.collection("users").get()
    commit(
      "LOAD_USER",
      result.docs.map((d) => d.data())
    )
  },
}

……ということで、layout/default.vueの以下の部分を修正していきます。

layout/default.vue

<script>
  mounted() {
    this.$fb.auth().onAuthStateChanged((user) => {
      if (user) {
        // 通常のページが表示される処理を書く
      } else {
        // サインインページが現れるような処理を書く
      }
    })
  },
</script>

5.結論

……とつらつらと書いてきましたが、結局ココまで書いてわかりませんでした。

またわかったらつらつらと書いていきます。