差分

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

--- 17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/08] – [Firebaseでメールアドレス/パスワードのアカウントを作成] 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/
@@ 行 327: / 行 336: @@
 ~/pages/account.vue　を新規作成します。
-<code>
+<html>
-<template>
+<script src="https://gist.github.com/adash333/567c69d2faa04ddf4917c2542ee7ae15.js"></script>
-  <div>
+</html>
-    <!-- ログイン中に表示される画面 -->
+{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-100425.png}}
-    <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>
-</code>
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-150707.png}}
 ===== Firebaseでメールアドレス/パスワードのアカウントを作成 =====
@@ 行 494: / 行 395: @@
 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に自動的に飛びます。
+今回は以上となります。
@@ 行 517: / 行 450: @@
-===== Nuxt.jsのvuex（モジュールモード）でパスワード制限 =====
@@ 行 523: / 行 455: @@
 ===== ソースコード =====
 ソースコード
+https://github.com/adash333/Nuxt-Vuex-FireAuth
 DEMO
+{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104651.png}}
 ===== 今回写経させて頂いたサイト =====