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

差分

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

この比較画面へのリンク

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

17.nuxt.jsのvuexでパスワード制限/index.html.1549620074.txt.gz · 最終更新: 2019/02/08 by adash333