17.nuxt.jsのvuexでパスワード制限:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/08] – [新規Nuxt.jsアプリの作成] 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を利用するときの注意点 ==== | ||
行 333: | 行 336: | ||
~/ | ~/ | ||
- | <code> | + | <html> |
- | <template> | + | <script src=" |
- | <div> | + | </html> |
- | <!-- ログイン中に表示される画面 --> | + | {{: |
- | <div v-if=" | + | |
- | <v-flex xs12 sm8 md4> | + | |
- | <v-card class=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | {{ user.email }}でログイン中です< | + | |
- | <a href="/ | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | <v-btn color=" | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | <!-- ログインしていない時に表示される画面 --> | + | |
- | <div v-else> | + | |
- | <v-flex xs12 sm8 md4> | + | |
- | <v-card class=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | prepend-icon=" | + | |
- | name=" | + | |
- | label=" | + | |
- | type=" | + | |
- | v-model=" | + | |
- | ></ | + | |
- | < | + | |
- | id=" | + | |
- | prepend-icon=" | + | |
- | name=" | + | |
- | label=" | + | |
- | type=" | + | |
- | v-model=" | + | |
- | ></ | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | < | + | |
- | < | + | |
- | <v-btn color=" | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | <!-- ログイン中に表示される画面 --> | + | |
- | <div v-if=" | + | |
- | {{ user.email }}でログイン中です< | + | |
- | <button v-on: | + | |
- | <a href="/ | + | |
- | </ | + | |
- | + | ||
- | </ | + | |
- | </ | + | |
- | + | ||
- | < | + | |
- | import firebase from ' | + | |
- | import { mapActions, mapState, mapGetters } from ' | + | |
- | export default { | + | |
- | data() { | + | |
- | return { | + | |
- | email: '', | + | |
- | password: '' | + | |
- | } | + | |
- | }, | + | |
- | computed: { | + | |
- | ...mapState([' | + | |
- | ...mapGetters([' | + | |
- | }, | + | |
- | mounted() { | + | |
- | firebase.auth().onAuthStateChanged((user) => { | + | |
- | this.setUser(user) | + | |
- | }) | + | |
- | }, | + | |
- | methods : { | + | |
- | ...mapActions([' | + | |
- | login() { | + | |
- | firebase.auth().signInWithEmailAndPassword(this.email, | + | |
- | .then(user => { | + | |
- | // ログインしたら飛ぶページを指定 | + | |
- | // this.$router.push("/ | + | |
- | }).catch((error) => { | + | |
- | alert(error) | + | |
- | }); | + | |
- | }, | + | |
- | logout() { | + | |
- | firebase.auth().signOut() | + | |
- | .then(() => { | + | |
- | this.setUser(null) | + | |
- | }).catch((error) => { | + | |
- | alert(error) | + | |
- | }) | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | </ | + | |
- | </ | + | |
- | {{: | + | |
===== Firebaseでメールアドレス/ | ===== Firebaseでメールアドレス/ | ||
行 500: | 行 395: | ||
slotというものを初めて見ましたが、なんかややこしく感じます。 | slotというものを初めて見ましたが、なんかややこしく感じます。 | ||
+ | ===== pages/ | ||
+ | pages/ | ||
+ | < | ||
+ | < | ||
+ | <v-flex xs12 sm6 offset-sm3> | ||
+ | <v-card class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | <a href="/ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | import MembersOnly from ' | ||
+ | export default { | ||
+ | components: { | ||
+ | MembersOnly | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
+ | ログインしていない状態だと、member-pageから、accountに自動的に飛びます。 | ||
+ | |||
+ | 今回は以上となります。 | ||
行 523: | 行 450: | ||
- | ===== Nuxt.jsのvuex(モジュールモード)でパスワード制限 ===== | ||
行 529: | 行 455: | ||
===== ソースコード ===== | ===== ソースコード ===== | ||
ソースコード | ソースコード | ||
+ | https:// | ||
DEMO | DEMO | ||
+ | {{: | ||
===== 今回写経させて頂いたサイト ===== | ===== 今回写経させて頂いたサイト ===== |
17.nuxt.jsのvuexでパスワード制限/index.html.1549617695.txt.gz · 最終更新: 2019/02/08 by adash333