17.nuxt.jsのvuexでパスワード制限:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/07] – [Nuxt.jsとvuexのリンク] adash333 | 17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/08] (現在) – [ソースコード] adash333 | ||
---|---|---|---|
行 27: | 行 27: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
- | + | スクリーンショット | |
- | + | {{: | |
- | Demo | + | {{: |
+ | {{: | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 63: | 行 64: | ||
vuex-persistedstate@2.5.4 | vuex-persistedstate@2.5.4 | ||
</ | </ | ||
+ | |||
+ | 起動するときは、< | ||
==== UbuntuのBashを利用するときの注意点 ==== | ==== UbuntuのBashを利用するときの注意点 ==== | ||
行 144: | 行 147: | ||
ローカルのパソコンで扱う分(普通はCodeSandboxは使わずに、こちらですよね)には、Nuxt.jsは十分魅力的です。Vue.jsと比べて、インストールに時間がかかるのが難点ですが。 | ローカルのパソコンで扱う分(普通はCodeSandboxは使わずに、こちらですよね)には、Nuxt.jsは十分魅力的です。Vue.jsと比べて、インストールに時間がかかるのが難点ですが。 | ||
+ | |||
+ | ちなみに、layouts/ | ||
+ | {{: | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
参考:https:// | 参考:https:// | ||
行 327: | 行 336: | ||
~/ | ~/ | ||
- | <code> | + | <html> |
- | <template> | + | <script src=" |
- | <div> | + | </html> |
- | <!-- ログイン中に表示される画面 --> | + | {{:17.nuxt.jsのvuexでパスワード制限: |
- | <div v-if=" | + | |
- | <v-flex xs12 sm8 md4> | + | |
- | <v-card class=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | | + | |
- | <a href="/ | + | |
- | </v-card-text> | + | |
- | < | + | |
- | < | + | |
- | <v-btn color=" | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | <!-- ログインしていない時に表示される画面 --> | + | ===== Firebaseでメールアドレス/パスワードのアカウントを作成 |
- | <div v-else> | + | -Firebaseの管理画面で、Authentication |
- | <v-flex xs12 sm8 md4> | + | -さらに、Firebaseの管理画面で、Authentication |
- | <v-card class=" | + | {{: |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | prepend-icon=" | + | |
- | name=" | + | |
- | label=" | + | |
- | type=" | + | |
- | v-model=" | + | |
- | ></v-text-field> | + | |
- | < | + | |
- | id=" | + | |
- | prepend-icon=" | + | |
- | name=" | + | |
- | label=" | + | |
- | type=" | + | |
- | v-model=" | + | |
- | | + | |
- | </ | + | |
- | </ | + | |
- | < | + | ===== ログイン後のみ閲覧可能なコンポーネントを作成 ===== |
- | < | + | |
- | <v-btn color=" | + | 引き続き、[[https: |
- | </ | + | |
- | </v-card> | + | ログインしていないと閲覧不可能で、ログイン後のみ閲覧可能たなるコンポーネント(認証していないとログイン画面に飛ばされるコンポーネント)である、 |
- | </v-flex> | + | |
- | </ | + | |
- | <!-- ログイン中に表示される画面 --> | + | ~/components/members-only.vue |
- | <div v-if=" | + | |
- | {{ user.email }}でログイン中です< | + | |
- | <button v-on: | + | |
- | <a href="/member-page"> | + | |
- | </ | + | |
+ | を新規作成します。 | ||
+ | |||
+ | ~/ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <div v-if=" | ||
+ | < | ||
</ | </ | ||
</ | </ | ||
< | < | ||
- | import firebase from ' | + | import { mapGetters, mapState } from ' |
- | import { mapActions, mapState, mapGetters | + | |
export default { | export default { | ||
data() { | data() { | ||
return { | return { | ||
- | | + | |
- | password: '' | + | |
} | } | ||
}, | }, | ||
computed: { | computed: { | ||
- | ...mapState([' | ||
...mapGetters([' | ...mapGetters([' | ||
}, | }, | ||
- | mounted() { | + | |
- | | + | |
- | | + | |
- | }) | + | // ログインしていなかったら飛ぶページを設定 |
- | }, | + | this.$router.push(' |
- | methods : { | + | } |
- | ...mapActions([' | + | this.loaded |
- | login() { | + | }, 0) |
- | firebase.auth().signInWithEmailAndPassword(this.email, this.password) | + | |
- | .then(user => { | + | |
- | // ログインしたら飛ぶページを指定 | + | |
- | | + | |
- | }).catch((error) => { | + | |
- | alert(error) | + | |
- | | + | |
- | }, | + | |
- | logout() { | + | |
- | firebase.auth().signOut() | + | |
- | .then(() => { | + | |
- | | + | |
- | }).catch((error) | + | |
- | | + | |
- | | + | |
- | } | + | |
} | } | ||
} | } | ||
</ | </ | ||
</ | </ | ||
- | {{: | ||
- | ===== Firebaseでメールアドレス/パスワードのアカウントを作成 ===== | + | 参考:https:// |
- | -Firebaseの管理画面で、Authentication | + | |
- | -さらに、Firebaseの管理画面で、Authentication | + | slotというものを初めて見ましたが、なんかややこしく感じます。 |
- | {{: | + | |
+ | ===== pages/member-page.vueの作成 ===== | ||
+ | |||
+ | pages/ | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | <v-card class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <v-spacer></ | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | <a href="/ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import MembersOnly from ' | ||
+ | |||
+ | export default { | ||
+ | components: { | ||
+ | MembersOnly | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ログインしていない状態だと、member-pageから、accountに自動的に飛びます。 | ||
+ | |||
+ | 今回は以上となります。 | ||
行 463: | 行 450: | ||
- | ===== Nuxt.jsのvuex(モジュールモード)でパスワード制限 ===== | ||
行 469: | 行 455: | ||
===== ソースコード ===== | ===== ソースコード ===== | ||
ソースコード | ソースコード | ||
+ | https:// | ||
DEMO | DEMO | ||
+ | {{: | ||
===== 今回写経させて頂いたサイト ===== | ===== 今回写経させて頂いたサイト ===== | ||
行 540: | 行 526: | ||
===== Nuxt.jsと認証authenticationのリンク ===== | ===== Nuxt.jsと認証authenticationのリンク ===== | ||
+ | |||
+ | https:// | ||
+ | 2018.08.13 | ||
+ | Nuxt.js+Firebase入門 | ||
+ | Nuxt.jsとFirebase Authenticationでログイン認証を作る | ||
+ | 高崎 健司 | ||
+ | →vuexを用いないGoogle認証のやり方の記載があります。分かりやすく、ソースコードもあります。 | ||
http:// | http:// | ||
【Vue.js】Vue.js(Nuxt.js)でユーザー登録・ログイン・ログアウトなどの認証機能を簡単に実装する with Firebase【Firebase Auth】 | 【Vue.js】Vue.js(Nuxt.js)でユーザー登録・ログイン・ログアウトなどの認証機能を簡単に実装する with Firebase【Firebase Auth】 | ||
2018-12-11 | 2018-12-11 | ||
+ | →Vuexの使い方の参考になります。 | ||
+ | |||
+ | https:// | ||
+ | Nuxt + Firebase Authentication | ||
+ | 31 Mar 2018 | ||
+ | →こちらも、Vuexの使い方の参考になります。 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
17.nuxt.jsのvuexでパスワード制限/index.html.1549576069.txt.gz · 最終更新: 2019/02/07 by adash333