====== 17.Nuxt.jsのvuexでパスワード制限 ======
状態管理システムvuexが難しすぎて理解できないので、わかりやすいサイトをひたすら写経して理解しようと努力していくシリーズの4回目。

前回の[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]では、Vue.js上でVuexを用いて、FirebaseのGoogle認証を行いました。

上記と全く同じことを、Vue.jsのRuby on Rails版のような位置にあるNuxt.jsを用いて、行いたいと思います。

Vue.jsと比べて、Nuxt.jsは「全部入り」といった感じで、たとえば、router.jsをわざわざ定義しなくても、ページを作成するだけで自動的にルーティングなどを行ってくれます。

→最初、CodeSandbox上で行おうと努力しましたが、どうしても、VuetifyやBulma, Font Awesomeのインストールがうまくいかず、ローカル環境で行う方針に変更しました。そのため、環境構築は、面倒なこととなっています。

===== 初めてのVuex目次 =====
[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]

[[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]]

[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]

[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]

[[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]]

===== すること =====
  -Nuxt.jsのVuexを用いて、FirebaseへのGoogleログイン認証機能を実装する

今回は、https://qiita.com/redshoga/items/da5c0e247e0df314a257と、https://qiita.com/sakapun/items/a0cf5698751ae70c8088を写経させていてだきました。

ソースコード
https://github.com/adash333/Nuxt-Vuex-FireAuth

スクリーンショット
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104526.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104605.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104403.png}}

===== 開発環境 =====
2019年2月現在、残念ながら、私の技術では、CodeSandbox上のNuxt.jsにVuetify, Bulmaを利用できるようにすることができませんでした。そのため、自分のパソコンで環境構築をすることとします。
当サイトではWindows10パソコンを利用します。Windows10パソコン購入後の環境構築については、<wrap hi>[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]</wrap>に記載させていただきました。
<code>
Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode 

Windows Subsystem for Linux (WSL)
Ubuntu18.04
VisualStudioCodeのターミナル画面をWSLのBashに設定
git 2.17.1
anyenv 
nodenv 1.1.2-69-gced0e70
node 10.14.2
</code>
私の場合、以下のようにフォルダ共有しています。
<code>
Windowsの C:/Users/a/a/
Ubuntuの  /mnt/c/Users/a/a/
</code>
また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]</wrap>にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。

今回構築した環境
<code>
yarn 1.13.0

firebase@5.8.2
vuex-persistedstate@2.5.4
</code>

起動するときは、<wrap hi>yarn run dev</wrap>

==== UbuntuのBashを利用するときの注意点 ====

何かをnpm installなどした直後は、必ず、<wrap hi>exec $SHELL -l</wrap>を入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを利用することができません。
<code>
exec $SHELL -l
</code>


===== yarnのインストール（必須ではありません） =====
yarnのインストールは必須ではありませんが、あまりにも、yarnを使用した解説が多いことと、npmよりも早いらしいので、yarnも使用してみることにしました。

  -VisualStudioCodeを起動し、File > Open Folderで、Windowsの C:/Users/a/a/nuxt/ フォルダを開く
  -Ctrl+@ を押して、VisualStudioCodeのターミナル画面を表示
  -yarnのインストール
<code>
npm install -g yarn
exec $SHELL -l
</code>
Ubuntuを用いているので、<wrap hi>exec $SHELL -l</wrap>を忘れないように入力しておきます。

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-153807.png}}

参考：https://qiita.com/masterkey1009/items/50f95b1187646a7db385
@masterkey1009
2018年07月18日に更新
yarnを使ってみた

===== 新規Nuxt.jsアプリの作成 =====
  *VisualStudioCodeのターミナル画面で、以下を入力
<code>
yarn create nuxt-app Nuxt-Vuex-FireAuth
</code>
いろいろ聞かれるので、以下のように設定します。
  -プロジェクト名は？ => (Enter)
  -プロジェクトの一言説明は？ => (Enter)
  -サーバーフレームワークは？ => 使わない
  -UIフレームワークは？ => Vuetify
  -レンダリングモードは？ => ユニバーサルじゃなくてシングルページアプリケーション
  -axiosモジュールは使う？ => 使わない
  -eslintは使う？ => PWA supportとPrettierを入れる（Linterは使わない）
  -作者名は？ => (Enter)
  -パッケージマネージャは？ => npmじゃなくてyarn
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-155619.png}}

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-154553.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-155531.png}}
だいぶ時間がかかる。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-160055.png}}
まだ時間がかかる。なんか、10分くらいかかった気がします。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-160623.png}}
  *以下を入力して、確認します
<code>
cd Nuxt-Vuex-FireAuth
yarn run dev
</code>
いきなりエラーが出ますが、1分以内に起動しました。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161201.png}}
アドレスをCtrlを押しながらクリックすると、以下のページが開きます。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161229.png}}
あまりかっこよくありません。Nuxt-Vuetifyの方たちのセンスなんでしょうか。。。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161342.png}}
しかし、左側のハンバーガーメニューをクリックして、Inspire　をクリックすると、ちゃんと、Inspireのページに飛びます。
アイコンもちゃんと使用できるようです。（Vue.js＋Vuetifyにアイコンをインストールするのが面倒なので、これはうれしいです。）
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161420.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161455.png}}

なお、アイコンは、MDのようです。MDのアイコンは、以下から探すことができます。
https://material.io/tools/icons/
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162008.png}}

Nuxt.jsアプリの中身を見てみます。

layouts/default.vue
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162439.png}}
pages/index.vue
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162524.png}}
.nuxt/router.js (自動生成されます。触りません。)
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162904.png}}

ローカルのパソコンで扱う分（普通はCodeSandboxは使わずに、こちらですよね）には、Nuxt.jsは十分魅力的です。Vue.jsと比べて、インストールに時間がかかるのが難点ですが。

ちなみに、layouts/default.vueのdarkを消したり、少し変更すると、以下のようになります。
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-092134.png}}
<html>
<script src="https://gist.github.com/adash333/bacc2736bdcd5ce8093225234bc50147.js"></script>
</html>

参考：https://ja.nuxtjs.org/guide/installation/
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-154043.png}}

https://qiita.com/soarflat/items/06377f3b96964964a65d
@soarflat
2018年07月24日に更新
Prettier 入門 ～ESLintとの違いを理解して併用する～






===== 新規Firebaseアプリの作成とplugins/firebase.jsの新規作成 =====

  -https://console.firebase.google.com　にGoogleアカウントでログイン
  -新規プロジェクト作成
  -Project Overview > 「開始するにはアプリを追加してください」のすぐ上の、「</>」をクリック
  -「ウェブアプリに Firebase を追加」画面が出てくるので、中身をメモ帳などにコピーしておく(後で、plugins/firebse.jsにペーストします)
  -Authentication > ログイン方法 > Google をクリックして、Google認証を「有効にする」をONにして保存
  -Authentication > ログイン方法　の画面の下の方へ行き、承認済みドメイン のところに　localhostが入っていることを確認する。（本番環境にデプロイする場合は、そのドメインを追加する。）
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-150042.png}}

  *ターミナル画面で以下を入力して、firebasepをインストール
<code>
yarn add firebase
// npm install firebase --save
</code>

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-141727.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-141844.png}}

  *plugins/firebase.jsを新規作成
<code>
import firebase from 'firebase'

// こちらは、ご自身のFirebaseアプリの「ウェブアプリに Firebase を追加」の中の設定をコピーしてください

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: "xxxxxxxxxxx",
    authDomain: "xxxxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxx"
  })
}

export default firebase
</code>

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-032135.png}}

これ以降、このプロジェクトでFirebase関係のAPIを用いる時は<wrap hi>import firebase from '~/plugins/firebase'</wrap>をして使います。するとキーが入ったfirebaseが使えるようになります。（参考：https://qiita.com/redshoga/items/da5c0e247e0df314a257　）

===== ユーザデータの保存の準備 =====
引き続き、[[https://qiita.com/redshoga/items/da5c0e247e0df314a257]]を写経していきます。

ログインしたあとにユーザ認証データを『ユーザの端末』に保存するためvuexを使います。<wrap hi>今回のキモです。</wrap>

Nuxt.jsには、あらかじめVuexがインストールされていて、store/フォルダにindex.jsを記載することによって、Vuexを記載することができるそうです。

~/store/index.js　を、新規作成して、以下のように入力します。
<code>
export const strict = false

export const state = () => ({
  user: null,
})

export const getters = {
  isAuthenticated (state) {
    return !!state.user
  }
}

export const mutations = {
  setUser (state, payload) {
    state.user = payload
  }
}

export const actions = {
  setUser ({ commit }, payload) {
    commit('setUser', payload)
  }
}
</code>

参考までに、Vue.jsのときのstore.jsのテンプレートを以下に記載させて頂きます（今回のコードではありません。）

<code>
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},

  getters: {},

  mutations: {},

  actions: {}
});

export default store;
</code>

===== 認証状態の有無とユーザ情報をlocalStorageに保存する =====
[[https://qiita.com/redshoga/items/da5c0e247e0df314a257]]によりますと、以下のような流れになるそうです。

  -Firebaseで認証を行う
  -setUserを用いて認証したデータを保存
  -認証が必要な各ページではこのuserデータを読み込みをログイン済みか検証する

ここで、Vuexはロードするとデータが消えてしまうので、消さないようにユーザのlocalStorageを用いていい感じに保存できるようにしておきます。そのために<wrap hi>vuex-persistedstate</wrap>を使います。

参考：https://qiita.com/sakapun/items/a0cf5698751ae70c8088

  *VisualStudioCodeのターミナル画面で以下を入力
<code>
yarn add vuex-persistedstate
// npm install -S vuex-persistedstate
</code>
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-142043.png}}
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-142058.png}}

  *plugins/persistedstate.jsを新規作成して、以下のコードを記載（参考：[[https://qiita.com/sakapun/items/a0cf5698751ae70c8088]]）
<code>
import createPersistedState from "vuex-persistedstate";

export default ({store, isHMR}) => {
  // In case of HMR, mutation occurs before nuxReady, so previously saved state
  // gets replaced with original state received from server. So, we've to skip HMR.
  // Also nuxtReady event fires for HMR as well, which results multiple registration of
  // vuex-persistedstate plugin
  if (isHMR) return;

  if (process.client) {
    window.onNuxtReady((nuxt) => {
      createPersistedState()(store); // vuex plugins can be connected to store, even after creation
    });
  }
};
</code>
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-142229.png}}

  *nuxt.config.jsに、以下のように記載
<code>
  plugins: [
    { src: "~plugins/persistedstate.js", ssr: false }
  ]
</code>
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-142545.png}}

これでロードしてもVuexのデータが消えなくなるそうです。
ただひとつ難点があり、createdやmounted時にVuexの値が取得できないそうです。
そのため、Vuexの値をページロード時に最初に取得し、なにかする場合には以下のように書く必要があるそうです。（参考：[[https://qiita.com/redshoga/items/da5c0e247e0df314a257]]）
<code>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user'])
  },
  mounted() {
    console.log(this.user) // ここだと取得できない
    setTimeout(() => {
      console.log(this.user) // ここだと取得できる
      // なにかしらの処理
    })
  }
}
</code>
→こんなの絶対自分では気付きようがないです、、、

===== ログイン画面(pages/account.vue)の作成 =====

~/pages/account.vue　を新規作成します。
<html>
<script src="https://gist.github.com/adash333/567c69d2faa04ddf4917c2542ee7ae15.js"></script>
</html>

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-100425.png}}

===== Firebaseでメールアドレス/パスワードのアカウントを作成 =====
  -Firebaseの管理画面で、Authentication > ログイン方法 > メール/パスワード　のところを『有効』にしておきます
  -さらに、Firebaseの管理画面で、Authentication > ユーザー > ユーザーを追加　をクリックして、email:sample@sample.com, pass:samplesample　で登録をしておきます
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-151417.png}}

===== ログイン後のみ閲覧可能なコンポーネントを作成 =====

引き続き、[[https://qiita.com/redshoga/items/da5c0e247e0df314a257#5-認証が必要な画面を簡単に作成]]を写経していきます。

ログインしていないと閲覧不可能で、ログイン後のみ閲覧可能たなるコンポーネント(認証していないとログイン画面に飛ばされるコンポーネント)である、

~/components/members-only.vue

を新規作成します。

~/components/members-only.vue

<code>
<template>
  <div v-if="loaded">
    <slot/>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  data() {
    return {
      loaded: false
    }
  },
  computed: {
    ...mapGetters(['isAuthenticated'])
  },
  async mounted() {
    setTimeout(() => {
      if (!this.isAuthenticated) {
        // ログインしていなかったら飛ぶページを設定
        this.$router.push('account')
      }
      this.loaded = true
    }, 0)
  }
}
</script>
</code>

参考：https://jp.vuejs.org/v2/guide/components-slots.html

slotというものを初めて見ましたが、なんかややこしく感じます。

===== pages/member-page.vueの作成 =====

pages/member-page.vueを新規作成します。
<code>
<template>
  <v-flex xs12 sm6 offset-sm3>
    <v-card class="elevation-12">
      <members-only>
        <v-toolbar dark color="primary">
          <v-toolbar-title>ログインしていないと見れないページ</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card-text>
           ログイン中です<br>
            <a href="/account">アカウントページへ</a>
          </v-card-text>
      </members-only>
    </v-card>
  </v-flex>
</template>

<script>
import MembersOnly from '~/components/members-only.vue'

export default {
  components: {
    MembersOnly
  }
}
</script>
</code>

{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-103951.png}}

ログインしていない状態だと、member-pageから、accountに自動的に飛びます。

今回は以上となります。





















===== ソースコード =====
ソースコード
https://github.com/adash333/Nuxt-Vuex-FireAuth

DEMO
{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104651.png}}

===== 今回写経させて頂いたサイト =====

https://qiita.com/redshoga/items/da5c0e247e0df314a257
@redshoga
2018年12月13日に投稿
Nuxt.js #2 Advent Calendar 201812日目
FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月の自分に教えたいリンク集

https://qiita.com/sakapun/items/a0cf5698751ae70c8088
@sakapun
2018年01月22日に更新
nuxt.jsを使う時にlocalStorageでstoreを永続化する


===== Nuxt.jsとVuetifyのリンク =====

1番確実なのは、Node.jsインストール済みのローカルのパソコンで、以下を入力し、途中でVuetifyを選ぶことです。
<code>
npx create-nuxt-app <my-project>
</code>

https://github.com/nuxt/create-nuxt-app/blob/master/README.md

しかし、2019年1月時点では、CodeSandboxでは、この方法は使えません。

https://github.com/nuxt-community/modules/blob/master/packages/vuetify/README.md
→こちらに書いてある方法(v0.5.2)をこの上の方で試してみたのですが、なんか、だめそうです。。。そりゃ、普通はcreate-nuxt-app使いますよね、、、

以下のものは、2018年9月以降、更新はされないと思われます。残念です。
https://github.com/vuetifyjs/nuxt


===== Nuxt.jsとvuexのリンク =====

https://qiita.com/redshoga/items/da5c0e247e0df314a257
@redshoga
2018年12月13日に投稿
Nuxt.js #2 Advent Calendar 201812日目
FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月の自分に教えたいリンク集

https://qiita.com/y-miine/items/028c73aa3f87e983ed4c
@y-miine
2018年12月03日に更新
Nuxt.jsのストアをモジュールモードで使用するときのTips

https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d
@isamusuzuki
2018年05月03日に更新
Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件
→BulmaというCSSフレームワークで、ハンバーガーメニューを作る方法が、わかりやすく記載されています。

https://tech.libinc.co.jp/entry/2018/11/15/143000
2018-11-15
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた
→素晴らしいです。写経してみたいと思います。

https://wb-hp.com/blog/2018/10/15/vuex-store.html
Nuxt.js 必須スキル Vuex ストア を扱う
2018年10月15日

https://crieit.net/posts/Vuex-Store-Nuxt
だら@Crieit開発者  
2018-10-30に更新
VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる

===== Nuxt.jsと認証authenticationのリンク =====

https://www.non-standardworld.co.jp/nuxt-js-firebase/20548/
2018.08.13
Nuxt.js＋Firebase入門
Nuxt.jsとFirebase Authenticationでログイン認証を作る
高崎 健司
→vuexを用いないGoogle認証のやり方の記載があります。分かりやすく、ソースコードもあります。

http://www.sky-limit-future.com/entry/nuxtjs_firebase_authentication
【Vue.js】Vue.js(Nuxt.js)でユーザー登録・ログイン・ログアウトなどの認証機能を簡単に実装する with Firebase【Firebase Auth】
2018-12-11
→Vuexの使い方の参考になります。

https://blog.shimar.me/2018/03/31/nuxt-firebase-authentication.html
Nuxt + Firebase Authentication
31 Mar 2018　
→こちらも、Vuexの使い方の参考になります。


















































===== リンク =====
目次：

前：

後：