17.nuxt.jsのvuexでパスワード制限:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
17.nuxt.jsのvuexでパスワード制限:index.html [2019/02/07] – [認証状態の有無とユーザ情報をlocalStorageに保存する] 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:// | ||
行 324: | 行 333: | ||
→こんなの絶対自分では気付きようがないです、、、 | →こんなの絶対自分では気付きようがないです、、、 | ||
- | ===== ログイン画面、認証コンポの作成 ===== | + | ===== ログイン画面(pages/ |
+ | ~/ | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Firebaseでメールアドレス/ | ||
+ | -Firebaseの管理画面で、Authentication > ログイン方法 > メール/ | ||
+ | -さらに、Firebaseの管理画面で、Authentication > ユーザー > ユーザーを追加 をクリックして、email: | ||
+ | {{: | ||
+ | |||
+ | ===== ログイン後のみ閲覧可能なコンポーネントを作成 ===== | ||
+ | |||
+ | 引き続き、[[https:// | ||
+ | |||
+ | ログインしていないと閲覧不可能で、ログイン後のみ閲覧可能たなるコンポーネント(認証していないとログイン画面に飛ばされるコンポーネント)である、 | ||
+ | |||
+ | ~/ | ||
+ | |||
+ | を新規作成します。 | ||
+ | |||
+ | ~/ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <div v-if=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import { mapGetters, mapState } from ' | ||
+ | |||
+ | export default { | ||
+ | data() { | ||
+ | return { | ||
+ | loaded: false | ||
+ | } | ||
+ | }, | ||
+ | computed: { | ||
+ | ...mapGetters([' | ||
+ | }, | ||
+ | async mounted() { | ||
+ | setTimeout(() => { | ||
+ | if (!this.isAuthenticated) { | ||
+ | // ログインしていなかったら飛ぶページを設定 | ||
+ | this.$router.push(' | ||
+ | } | ||
+ | this.loaded = true | ||
+ | }, 0) | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 参考:https:// | ||
+ | |||
+ | slotというものを初めて見ましたが、なんかややこしく感じます。 | ||
+ | |||
+ | ===== pages/ | ||
+ | |||
+ | pages/ | ||
+ | < | ||
+ | < | ||
+ | <v-flex xs12 sm6 offset-sm3> | ||
+ | <v-card class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | <a href="/ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import MembersOnly from ' | ||
+ | |||
+ | export default { | ||
+ | components: { | ||
+ | MembersOnly | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ログインしていない状態だと、member-pageから、accountに自動的に飛びます。 | ||
+ | |||
+ | 今回は以上となります。 | ||
行 344: | 行 450: | ||
- | ===== Nuxt.jsのvuex(モジュールモード)でパスワード制限 ===== | ||
行 350: | 行 455: | ||
===== ソースコード ===== | ===== ソースコード ===== | ||
ソースコード | ソースコード | ||
+ | https:// | ||
DEMO | DEMO | ||
+ | {{: | ||
===== 今回写経させて頂いたサイト ===== | ===== 今回写経させて頂いたサイト ===== | ||
行 419: | 行 524: | ||
2018-10-30に更新 | 2018-10-30に更新 | ||
VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる | VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる | ||
+ | |||
+ | ===== Nuxt.jsと認証authenticationのリンク ===== | ||
+ | |||
+ | https:// | ||
+ | 2018.08.13 | ||
+ | Nuxt.js+Firebase入門 | ||
+ | Nuxt.jsとFirebase Authenticationでログイン認証を作る | ||
+ | 高崎 健司 | ||
+ | →vuexを用いないGoogle認証のやり方の記載があります。分かりやすく、ソースコードもあります。 | ||
+ | |||
+ | http:// | ||
+ | 【Vue.js】Vue.js(Nuxt.js)でユーザー登録・ログイン・ログアウトなどの認証機能を簡単に実装する with Firebase【Firebase Auth】 | ||
+ | 2018-12-11 | ||
+ | →Vuexの使い方の参考になります。 | ||
+ | |||
+ | https:// | ||
+ | Nuxt + Firebase Authentication | ||
+ | 31 Mar 2018 | ||
+ | →こちらも、Vuexの使い方の参考になります。 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
17.nuxt.jsのvuexでパスワード制限/index.html.1549549566.txt.gz · 最終更新: 2019/02/07 by adash333