Vuexとは
VuexはVue.jsでの状態を管理するライブラリです。
フロントエンドでのページの状態（state）を管理する場合、いろんなところからデータを変更してしまうとその状態に対応したviewに変更を追従するのが大変になっていまします。
Vuexを使うことで状態の変更方法を一箇所（Actions）にまとめることで管理をしやすくし、状態を画面（View）に反映することが簡単になります。
下記画像のようにViewを変更→Actions経由でStateを変更→Stateが変更されたらViewに反映するという一方向の流れを作って単純化できます。
Vuexの導入
Vuexのインストール方法
yarnとnpmは下記です。
$ yarn add vuex $ npm install vuex --save
スクリプトをCDNからダウンロードすることもできます。vuex@3.0.1とすることでバージョンも指定できます。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://unpkg.com/vuex"></script>
Vuexの設定
Vue.jsでVuexを使う設定はVue.use()にVuexを渡すだけです。Vuex.storeにvuexで保持する状態、関数を設定していきます。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: {},
isSignIn: false
},
mutations: {
setUser(state, user) {
state.user = user; //firebaseが返したユーザー情報
},
setSignIn(state, isSignIn) {
state.isSignIn = isSignIn; //ログインしてるかどうか true or false
}
},
getters: {
user(state) {
return state.user;
},
isSignIn(state) {
return state.isSignIn;
}
}
});
state
stateに保持したい状態を設定します。ここに設定した値はリロードしてもリフレッシュさることがありません。
componentからはthis.$stateでアクセスできます。
mutations
mutatinsはstateを変更するための関数です。stateの変更をmutationsにまとめることで処理を統一することができます。
getters
gettersはstateの値を取得する関数をここにまとめます。
Firebase Authentication
Firebase AuthemticationはFacebookやGoogle、GitHubなど様々なプロバイダを使ったログイン機能を簡単に実装することができます。
// ./firebase.js
import firebase from 'firebase';
import store from "./store";
var config = {
apiKey: "API_KEY",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxxx.firebaseio.com",
projectId: "xxxx,
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxx"
};
export default {
init() {
firebase.initializeApp(config);
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
},
logout() {
firebase.auth().signOut()
},
onAuth() {
firebase.auth().onAuthStateChanged(user => {
user = user ? user : {};
store.commit('setUser', user);
store.commit('setSignIn', user.uid ? true : false);
});
}
};
init()でfirebaseの初期化を行なっています。configはFirebaseのコンソールから取得できます。
Persistence.SESSIONを設定することで認証情報をローカルストレージに保存することができます。
onAuth()で呼んでいるonAuthStateChanged()は認証状態が変更されたタイミングで呼ばれる関数で、ログインしているユーザのstateを変更しています。
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import firebase from './firebase'
firebase.init()
firebase.onAuth()
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
main.jsでfirebaseを初期化するinit()と認証状態を管理するonAuth()関数を呼んでおきます。
main.jsで下記App.vueを読み込んでいます。App.vueではヘッダーに表示するLogin.vueを読み込んでいてそこでfirebaseuiを使ってログイン画面を表示しています。
<template>
<v-app>
<v-toolbar app>
<v-toolbar-title class="headline">
<span>Programming Magazine</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<Login />
</v-toolbar>
<v-container justify-center>
<v-layout text-md-center>
<router-link to="/"></router-link>
<router-link to="/login"></router-link>
<router-link to="/magazine/vue"></router-link>
<router-view></router-view>
</v-layout>
</v-container>
</v-app>
</template>
<script>
import login from './components/header/login'
export default {
components: {
Login: login
}
}
</script>
firebaseuiモジュールはGoogle、Facebook、Twitter、Githubなどのログイン画面を綺麗に表示してくれます。下記サンプルではGoogleとGitHubでのログインが行えるようになっています。
<template>
<v-content>
<v-container justify-center>
<div id="firebaseui-auth-container"></div>
</v-container>
</v-content>
</template>
<script>
import store from '../../store'
import firebase from 'firebase';
import * as firebaseui from 'firebaseui';
export default {
mounted() {
// FirebaseUI config.
var uiConfig = {
callbacks: {
signInSuccess: function(currentUser) {
store.commit('setUser', currentUser);
store.commit('setSignIn', true);
return true;
},
},
signInFlow: 'popup',
signInSuccessUrl: '/magazine/vue',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
],
// tosUrl and privacyPolicyUrl accept either url string or a callback
// function.
// Terms of service url/callback.
tosUrl: '/category',
// Privacy policy url/callback.
privacyPolicyUrl: function() {
window.location.assign('/top');
}
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
}
}
</script>
firebaseuiでは認証後にリダイレクトさせるコールバックURLを指定して任意の処理を行なったり、利用規約、プライバシーポリシー用のURLも設定できます。
これだけのソースコードでログイン機能を簡単に実装することができるのでおすすめです。
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す