差分

このページの2つのバージョン間の差分を表示します。

--- 17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/07] – [認証状態の有無とユーザ情報をlocalStorageに保存する] adash333
+++ 17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/08] (現在) – [ソースコード] adash333
@@ 行 27: / 行 27: @@
 ソースコード
+https://github.com/adash333/Nuxt-Vuex-FireAuth
+スクリーンショット
+{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104526.png}}
-Demo
+{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104605.png}}
+{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104403.png}}
 ===== 開発環境 =====
@@ 行 63: / 行 64: @@
 vuex-persistedstate@2.5.4
 </code>
+起動するときは、<wrap hi>yarn run dev</wrap>
 ==== UbuntuのBashを利用するときの注意点 ====
@@ 行 144: / 行 147: @@
 ローカルのパソコンで扱う分（普通は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/
@@ 行 324: / 行 333: @@
 →こんなの絶対自分では気付きようがないです、、、
-===== ログイン画面、認証コンポの作成 =====
+===== ログイン画面(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に自動的に飛びます。
+今回は以上となります。
@@ 行 344: / 行 450: @@
-===== Nuxt.jsのvuex（モジュールモード）でパスワード制限 =====
@@ 行 350: / 行 455: @@
 ===== ソースコード =====
 ソースコード
+https://github.com/adash333/Nuxt-Vuex-FireAuth
 DEMO
+{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104651.png}}
 ===== 今回写経させて頂いたサイト =====
@@ 行 419: / 行 524: @@
 -10-30に更新
 VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる
+===== Nuxt.jsと認証authenticationのリンク =====
+https://www.non-standardworld.co.jp/nuxt-js-firebase/20548/
+.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】
+-12-11
+→Vuexの使い方の参考になります。
+https://blog.shimar.me/2018/03/31/nuxt-firebase-authentication.html
+Nuxt + Firebase Authentication
+Mar 2018
+→こちらも、Vuexの使い方の参考になります。