====== 16.vue.jsのvuexでパスワード制限 ====== 状態管理システムvuexが難しすぎて理解できないので、わかりやすいサイトをひたすら写経して理解しようと努力していくシリーズの3回目。今回は、Vue.js上でVuexを用いて、FirebaseのGoogle認証にtryします。認証システムを実装するのは本当に面倒です。これでも、Firebaseを利用しているので、かなり簡単になっている方であることは理解しているつもりなのですが、、、 ===== 初めてのVuex目次 ===== [[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]] [[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]] [[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]] [[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]] ===== すること ===== -Vuexを用いて、FirebaseへのGoogleログイン認証機能を実装する -ページは、HomeとAboutの2ページ、vue-routerで振り分ける -Googleログインした状態では、Aboutページに、ログインした人の名前を表示する -ログインする前は、ログインボタン、ログインした状態では、ログアウトボタンを、ナビゲーションバー（ヘッダー）に表示する今回は、https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272を写経させていてだきました。ソースコード https://github.com/adash333/Vue_Vuex_Firebase_Auth https://codesandbox.io/s/54n9575y44 Demo https://54n9575y44.codesandbox.io/ {{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074345.png}} {{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074324.png}} {{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074427.png}} {{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074458.png}} ===== 開発環境 =====


Chrome
Codesandbox

Vue 2.5.2
vuetify 1.4.3
Vuex 3.1.0
vue-router 3.0.2

@firebase/app 0.3.8
@firebase/auth 0.9.2
babel-polyfill 6.26.0

===== CodeSandboxで新規Vue.jsアプリを作成 ===== 最初に、CodeSandbox上で、新規Vue.jsアプリを作成し、CSSフレームワークVuetifyが利用できるように設定します。 -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック -Vue　をクリック -Add Dependencyから、Vuetifyをインストール -index.htmlの編集 -src/main.jsの編集 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123704.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123723.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123749.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123804.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123835.png}} index.htmlと、src/main.jsは、以下をコピペします。 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124228.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124252.png}} 以上で、Vue.jsで、Vuetifyを利用する準備ができました。 ===== Vuetifyのテンプレートを適用 ===== src/App.vueに、以下のコードをコピペします。 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124906.png}} これで、App.vueの土台が出来上がりました。 ===== Vue.jsにVuexをインストール ===== Vuexを利用するための準備を行います。 -Add Dependencyから、Vuexをインストール -Add Dependencyから、babel-polyfillをインストール -src/main.jsの編集 -src/store.jsの新規作成 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141702.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141741.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141941.png}} src/main.jsは、以下の2行を追加します。（追加する位置には注意する必要があります。）


import store from './store'

store,

（変更前） {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142758.png}} （変更後） {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142928.png}} この時点では、store.jsを作成していないので、エラーが出ます。 *src/store.jsのテンプレートの作成 src/store.jsを新規作成し、以下をコピペします。


import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},

  getters: {},

  mutations: {},

  actions: {}
});

export default store;

これでも、まだエラーが出ています。。。 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-143709.png}} 右側の画面の更新画面を押すと、以下のように、vuexが動く準備ができたようです。 {{:15.vue.jsのvuexでカウンター:pasted:20190126-021146.png}} ===== Vue-Routerのインストール ===== Vue-Routerを利用するための準備を行います。 -Add Dependencyからvue-routerをインストール -src/router.jsの新規作成 -src/main.jsでrouter.jsを設定 {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-081151.png}} src/router.js


import Vue from 'vue'
import VueRouter from 'vue-router'

//プラグインとして登録
Vue.use(VueRouter)

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-083520.png}} src/main.jsに追加するコード


import router from './router'

// new Vueの中に記載
router,

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-153354.png}} *Home.vueとAbout.vueが無いとエラーが出てしまうので、src/components/Home.vueとAbout.vueを新規作成し、以下のテンプレートだけ記載しておく。

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-153734.png}} {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-153833.png}} ==== Vue Routerの組み込みコンポーネント ==== Vue Routerをインストールすると、次のコンポーネントが使用可能になります。（参考：[[https://amzn.to/2CR9GGn|基礎から学ぶ Vue.js]]） ^ カスタムタグ ^ 役割 ^ | | ルートとマッチしたコンポーネントを描画 | | | ルートのリンクを作成 | ==== Home.vueとAbout.vueをrouter.jsに設定する ==== 先ほど作成した2つのコンポーネント src/components/Home.vueと, src/components/About.vue をrouter.jsに、設定します。 {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-145531.png}} ===== 新規Firebaseアプリの作成とsrc/firebase.jsの新規作成 ===== 準備ばかりでうんざりですが、やります。 -https://console.firebase.google.com　にGoogleアカウントでログイン -新規プロジェクト作成 -Project Overview > 「開始するにはアプリを追加してください」のすぐ上の、「」をクリック -「ウェブアプリに Firebase を追加」画面が出てくるので、中身をメモ帳などにコピーしておく(後で、src/firebse.jsにペーストします) -Authentication > ログイン方法 > Google をクリックして、Google認証を「有効にする」をONにして保存 -Authentication > ログイン方法　の画面の下の方へ行き、承認済みドメイン > ドメインの追加　で、codesandbox.io　を追加する。（本当は、サブドメインまで記入することが望ましい。） {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-150042.png}} 参考：https://liginc.co.jp/378463 *Add Dependencyから、@firebase/app, @firebase/authをインストール {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-150351.png}} {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-150423.png}} *src/firebase.jsを新規作成


import firebase from "@firebase/app";
import "@firebase/auth";
import store from "./store";

// こちらは、ご自身のFirebaseアプリの「ウェブアプリに Firebase を追加」の中の設定をコピーしてください
const config = {
  apiKey: "xxxxxxxxxxx",
  authDomain: "xxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxx"
};

export default {
  init() {},
  login() {},
  logout() {},
  onAuth() {}
};

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-151601.png}} *src/main.jsにfirebaseを設定


import Firebase from "./firebase";
Firebase.init();

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-154238.png}} ===== firebase.jsに、Google認証のコードを記載 ===== src/firebase.jsに、Google認証を実装します。引き続き、[[https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%84%E3%81%8D%E3%81%BE%E3%81%99|Vue vuexでfirebaseのログイン保持]]のコードをコピペします。 {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-152423.png}}


user = user ? user : {};

のところは、『三項演算子』を利用しているようです。 ===== src/store.jsにログイン情報、ログイン状態の2つを保持する場所を作成する ===== 今回のコードの肝です。https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#vuex-storejsをコピペします。写経してから中身を考えます！（爆）（変更前） {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-154653.png}} （変更後） {{:16.vue.jsのvuexでパスワード制限:pasted:20190127-155003.png}} ===== Navigation.vueとAuthentication.vueのテンプレートを作成 ===== ナビゲーションバーのNavigation.vueと、その中に設置する、ログインボタン(未認証時)+ログアウトボタン（認証時）をまとめたAuthenticatoin.vueを新規作成し、とりあえず、テンプレートで埋めておきます。 src/components/Navigation.vue {{:16.vue.jsのvuexでパスワード制限:pasted:20190130-224629.png}} src/components/Authentication.vue {{:16.vue.jsのvuexでパスワード制限:pasted:20190130-225100.png}} {{:16.vue.jsのvuexでパスワード制限:pasted:20190130-232441.png}} ログイン機能は、Authentication.vueに実装予定ですが、この時点では、まだ見栄えのみです。また、個人的に、は極力書きたくないのですが、Googleのボタンだけは、https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272のコピペをさせていただくことにしました。参考 https://codepen.io/atgarbett/pen/QOZoyg Vuetify.js Responsive v-toolbar not triggering open/close event https://stackoverflow.com/questions/47536881/vuetify-js-responsive-v-toolbar-not-triggering-open-close-event ===== router.jsを編集してコンポーネントにルートを定義する ===== src/components/Navigation.vueのの中の、

の部分のリンクを定義するために、src/router.jsを編集します。また、このルーティングの定義により、

と記載することにより、コンポーネントを表示することができるようになります。 src/router.js ===== App.vueの中にNavigation.vueとHome.vue(/About.vue)を表示する ===== -Navigation.vueは、importしてから、と記載することにより表示します。 -Home.vue(/About.vue)は、router.jsにルーティングを記載しているので、

と記載することにより、コンポーネントを表示します。 src/App.vueの編集

//