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

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

ユーザ用ツール

サイト用ツール

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


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/07] – [ログイン画面、認証コンポの作成] adash33317.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 vuex-persistedstate@2.5.4
 </code> </code>
 +
 +起動するときは、<wrap hi>yarn run dev</wrap>
  
 ==== UbuntuのBashを利用するときの注意点 ==== ==== UbuntuのBashを利用するときの注意点 ====
行 144: 行 147:
  
 ローカルのパソコンで扱う分（普通はCodeSandboxは使わずに、こちらですよね）には、Nuxt.jsは十分魅力的です。Vue.jsと比べて、インストールに時間がかかるのが難点ですが。 ローカルのパソコンで扱う分（普通は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/ 参考：https://ja.nuxtjs.org/guide/installation/
行 327: 行 336:
  
 ~/pages/account.vue　を新規作成します。 ~/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>+
  
-    <!-- ログインしていない時に表示される画面 --> +===== Firebaseでメールアドレス/パスワードのアカウントを作成 ===== 
-    <div v-else> +  -Firebaseの管理画面で、Authentication > ログイン方法 > メール/パスワード　のところを『有効』にしておきます 
-      <v-flex xs12 sm8 md4> +  -さらに、Firebaseの管理画面で、Authentication > ユーザー > ユーザーを追加　をクリックして、email:sample@sample.com, pass:samplesample　で登録をしておきます 
-        <v-card class="elevation-12"> +{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-151417.png}}
-          <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>+
  
-    <!-- ログイン中に表示される画面 --> +引き続き、[[https://qiita.com/redshoga/items/da5c0e247e0df314a257#5-認証が必要な画面を簡単に作成]]を写経していきます。
-    <div v-if="isAuthenticated"> +
-      {{ user.email }}でログイン中です<br> +
-      <button v-on:click="logout">ログアウト</button><br> +
-      <a href="/member-page">メンバーページへ</a> +
-    </div>+
  
 +ログインしていないと閲覧不可能で、ログイン後のみ閲覧可能たなるコンポーネント(認証していないとログイン画面に飛ばされるコンポーネント)である、
 +
 +~/components/members-only.vue
 +
 +を新規作成します。
 +
 +~/components/members-only.vue
 +
 +<code>
 +<template>
 +  <div v-if="loaded">
 +    <slot/>
   </div>   </div>
 </template> </template>
  
 <script> <script>
-import firebase from '~/plugins/firebase' +import { mapGetters, mapState } from 'vuex' 
-import { mapActions, mapState, mapGetters } from 'vuex'+
 export default { export default {
   data() {   data() {
     return {     return {
-      email: '', +      loaded: false
-      password: ''+
     }     }
   },   },
   computed: {   computed: {
-    ...mapState(['user']), 
     ...mapGetters(['isAuthenticated'])     ...mapGetters(['isAuthenticated'])
   },   },
-  mounted() { +  async mounted() { 
-    firebase.auth().onAuthStateChanged((user) => { +    setTimeout(() => { 
-      this.setUser(user) +      if (!this.isAuthenticated) { 
-    }) +        // ログインしていなかったら飛ぶページを設定 
-  }, +        this.$router.push('account') 
-  methods : { +      } 
-    ...mapActions(['setUser']), +      this.loaded = true 
-    login() { +    }, 0)
-      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> </script>
 </code> </code>
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190207-150707.png}} 
  
 +参考：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に自動的に飛びます。
 +
 +今回は以上となります。
  
  
行 459: 行 450:
  
  
-===== Nuxt.jsのvuex（モジュールモード）でパスワード制限 ===== 
  
  
行 465: 行 455:
 ===== ソースコード ===== ===== ソースコード =====
 ソースコード ソースコード
 +https://github.com/adash333/Nuxt-Vuex-FireAuth
  
 DEMO DEMO
 +{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-104651.png}}
  
 ===== 今回写経させて頂いたサイト ===== ===== 今回写経させて頂いたサイト =====
行 534: 行 524:
 2018-10-30に更新 2018-10-30に更新
 VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる 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の使い方の参考になります。
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  


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