サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » 17.nuxt.jsのvuexでパスワード制限
トレース: • 17.nuxt.jsのvuexでパスワード制限
17.nuxt.jsのvuexでパスワード制限:index.html


文書の過去の版を表示しています。

目次

17.Nuxt.jsのvuexでパスワード制限

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

前回の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で入力フォーム

15.Vue.jsのvuexでカウンター

16.vue.jsのvuexでパスワード制限

17.Nuxt.jsのvuexでパスワード制限

18.Nuxt.jsとBulmaでハンバーガーメニュー

すること

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

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

ソースコード

Demo

開発環境

2019年2月現在、残念ながら、私の技術では、CodeSandbox上のNuxt.jsにVuetify, Bulmaを利用できるようにすることができませんでした。そのため、自分のパソコンで環境構築をすることとします。
当サイトではWindows10パソコンを利用します。Windows10パソコン購入後の環境構築については、Windows10購入時の設定に記載させていただきました。 

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

私の場合、以下のようにフォルダ共有しています。 

Windowsの C:/Users/a/a/
Ubuntuの  /mnt/c/Users/a/a/

また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、こちらの設定にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。

今回構築した環境 

yarn 1.13.0

firebase@5.8.2
vuex-persistedstate@2.5.4

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

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

exec $SHELL -l

yarnのインストール（必須ではありません）

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

  1. VisualStudioCodeを起動し、File > Open Folderで、Windowsの C:/Users/a/a/nuxt/ フォルダを開く
  2. Ctrl+@ を押して、VisualStudioCodeのターミナル画面を表示
  3. yarnのインストール
npm install -g yarn
exec $SHELL -l

Ubuntuを用いているので、exec $SHELL -lを忘れないように入力しておきます。

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

新規Nuxt.jsアプリの作成

  • VisualStudioCodeのターミナル画面で、以下を入力
yarn create nuxt-app Nuxt-Vuex-FireAuth

いろいろ聞かれるので、以下のように設定します。

  1. プロジェクト名は？ ⇒ (Enter)
  2. プロジェクトの一言説明は？ ⇒ (Enter)
  3. サーバーフレームワークは？ ⇒ 使わない
  4. UIフレームワークは？ ⇒ Vuetify
  5. レンダリングモードは？ ⇒ ユニバーサルじゃなくてシングルページアプリケーション
  6. axiosモジュールは使う？ ⇒ 使わない
  7. eslintは使う？ ⇒ PWA supportとPrettierを入れる（Linterは使わない）
  8. 作者名は？ ⇒ (Enter)
  9. パッケージマネージャは？ ⇒ npmじゃなくてyarn



だいぶ時間がかかる。

まだ時間がかかる。なんか、10分くらいかかった気がします。

  • 以下を入力して、確認します
cd Nuxt-Vuex-FireAuth
yarn run dev

いきなりエラーが出ますが、1分以内に起動しました。

アドレスをCtrlを押しながらクリックすると、以下のページが開きます。

あまりかっこよくありません。Nuxt-Vuetifyの方たちのセンスなんでしょうか。。。

しかし、左側のハンバーガーメニューをクリックして、Inspire　をクリックすると、ちゃんと、Inspireのページに飛びます。
アイコンもちゃんと使用できるようです。（Vue.js＋Vuetifyにアイコンをインストールするのが面倒なので、これはうれしいです。）

なお、アイコンは、MDのようです。MDのアイコンは、以下から探すことができます。
https://material.io/tools/icons/

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

layouts/default.vue

pages/index.vue

.nuxt/router.js (自動生成されます。触りません。)

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

参考：https://ja.nuxtjs.org/guide/installation/

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

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

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

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


  • plugins/firebase.jsを新規作成
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

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

ユーザデータの保存の準備

引き続き、https://qiita.com/redshoga/items/da5c0e247e0df314a257を写経していきます。

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

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

~/store/index.js　を、新規作成して、以下のように入力します。 

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)
  }
}

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

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

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

  getters: {},

  mutations: {},

  actions: {}
});

export default store;

認証状態の有無とユーザ情報をlocalStorageに保存する

https://qiita.com/redshoga/items/da5c0e247e0df314a257によりますと、以下のような流れになるそうです。

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

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

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

  • VisualStudioCodeのターミナル画面で以下を入力
yarn add vuex-persistedstate
// npm install -S vuex-persistedstate


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
    });
  }
};

  • nuxt.config.jsに、以下のように記載
  plugins: [
    { src: "~plugins/persistedstate.js", ssr: false }
  ]

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

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user'])
  },
  mounted() {
    console.log(this.user) // ここだと取得できない
    setTimeout(() => {
      console.log(this.user) // ここだと取得できる
      // なにかしらの処理
    })
  }
}

→こんなの絶対自分では気付きようがないです、、、

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

~/pages/account.vue　を新規作成します。 

<template>
  <div>

    <!-- ログイン中に表示される画面 -->
    <div v-if="isAuthenticated">
      <v-flex xs12 sm8 md4>
        <v-card class="elevation-12">
          <v-toolbar dark color="primary">
            <v-toolbar-title>ログイン中</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card-text>
            {{ user.email }}でログイン中です<br>
            <a href="/member-page">メンバーページへ</a>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="logout">ログアウト</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </div>

    <!-- ログインしていない時に表示される画面 -->
    <div v-else>
      <v-flex xs12 sm8 md4>
        <v-card class="elevation-12">
          <v-toolbar dark color="primary">
            <v-toolbar-title>Login form</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card-text>
            <v-form>
              <v-text-field
                prepend-icon="mail"
                name="email"
                label="Email"
                type="text"
                v-model="email"
              ></v-text-field>
              <v-text-field
                id="password"
                prepend-icon="lock"
                name="password"
                label="Password"
                type="password"
                v-model="password"
              ></v-text-field>
            </v-form>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="login">ログイン</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </div>

    <!-- ログイン中に表示される画面 -->
    <div v-if="isAuthenticated">
      {{ user.email }}でログイン中です<br>
      <button v-on:click="logout">ログアウト</button><br>
      <a href="/member-page">メンバーページへ</a>
    </div>

  </div>
</template>

<script>
import firebase from '~/plugins/firebase'
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  computed: {
    ...mapState(['user']),
    ...mapGetters(['isAuthenticated'])
  },
  mounted() {
    firebase.auth().onAuthStateChanged((user) => {
      this.setUser(user)
    })
  },
  methods : {
    ...mapActions(['setUser']),
    login() {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password)
      .then(user => {
        // ログインしたら飛ぶページを指定
        // this.$router.push("/member-page")
      }).catch((error) => {
        alert(error)
      });
    },
    logout() {
      firebase.auth().signOut()
      .then(() => {
        this.setUser(null)
      }).catch((error) => {
        alert(error)
      })
    }
  }
}
</script>

Nuxt.jsのvuex（モジュールモード）でパスワード制限

ソースコード

ソースコード

DEMO

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

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を選ぶことです。 

npx create-nuxt-app <my-project>

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のマニュアルを見るとすぐ理解できる

リンク

目次：

前：

後：


17.nuxt.jsのvuexでパスワード制限/index.html.1549552042.txt.gz · 最終更新: 2019/02/07 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki