【Vue.js×Firebase】SPAでログイン機能を実装する方法を解説

<template>
<div class="container">
  <h2>Topページです</h2>
</div>
</template>

<template>
  <div class="container">
    <h2>詳細ページです</h2>
    <p>ログインが必要なページです</p>
  </div>
</template>

<template>
<div class="container">
  <h2>ログイン</h2>
  <form class="login-form">
    <div class="input-group">
      <label for="email">メールアドレス</label>
      <input type="email" id="email">
    </div>
    <div class="input-group">
      <label for="password">パスワード</label>
      <input type="password" id="password">
    </div>
    <div class="input-group">
      <button type="button">送信</button>
    </div>
  </form>
</div>
</template>

<style>
.input-group {
  margin: 5px;
}
</style>

<template>
<div class="container">
  <h2>新規登録</h2>
  <form class="login-form">
    <div class="input-group">
      <label for="email">メールアドレス</label>
      <input type="email" id="email">
    </div>
    <div class="input-group">
      <label for="password">パスワード</label>
      <input type="password" id="password">
    </div>
    <div class="input-group">
      <button type="button">新規登録</button>
    </div>
  </form>
</div>
</template>

import Vue from 'vue';
import Router from 'vue-router';
import Home from './pages/Home.vue';
import About from './pages/About.vue';
import Login from './pages/Login.vue';
import Register from './pages/Register.vue';

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/login', component: Login },
    { path: '/register', component: Register },
  ]
});

<template>
  <div>
    <header class="header">
      <router-link to="/" class="header--link">トップ</router-link>
      <router-link to="/about" class="header--link">詳細</router-link>
      <router-link to="/login" class="header--link">ログイン</router-link>
      <router-link to="/register" class="header--link">新規登録</router-link>
    </header>
    <router-view></router-view> 
  </div>
</template>

<style scoped>
.header {
  text-align: center;
  display: flex;
  justify-content: center;
}
.header--link {
  padding: 10px;
}
</style>

$ cd vue-for-blog

$ npm install -D axios

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "axios": "^0.19.2", //axiosがあることを確認
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://identitytoolkit.googleapis.com/v1'

});

export default instance;

<template>
<div class="container">
  <h2>新規登録</h2>
  <form class="login-form">
    <div class="input-group">
      <label for="email">メールアドレス</label>
      <input type="email" id="email" v-model="email"> //v-modelで結びつける
    </div>
    <div class="input-group">
      <label for="password">パスワード</label>
      <input type="password" id="password" v-model="password">　//v-modelで結びつける
    </div>
    <div class="input-group">
      <button type="button" @click="register()">新規登録</button>　//クリックしたらregister()発火
    </div>
  </form>
</div>
</template>

<script>　
import axios from '../axios-for-auth.js';　//axiosのインスタンスをインポート
export default {
  data() {
    return {
      email: "",
      password: ""
    }
  },
  methods: {
    register() {　//axiosでapiを叩くメソッドを定義
      axios.post(
        '/accounts:signUp?key=yourAPIkey',
        {
          email: this.email,
          password: this.password,
          returnSecureToken: true
        }　
      ).then((response) => {　
        console.log(response);　//返ってきたレスポンスをログに表示
      });
      this.email = "";
      this.password = "";
    }
  }
}
</script>

<template>
<div class="container">
  <h2>ログイン</h2>
  <form class="login-form">
    <div class="input-group">
      <label for="email">メールアドレス</label>
      <input type="email" id="email" v-model="email"> //v-modelで結びつける
    </div>
    <div class="input-group">
      <label for="password">パスワード</label>
      <input type="password" id="password" v-model="password">　//v-modelで結びつける
    </div>
    <div class="input-group">
      <button type="button" @click="login()">送信</button>　//クリックしたらlogin()を発火
    </div>
  </form>
</div>
</template>

<script>
import axios from '../axios-for-auth.js'; //axiosのインスタンスをインポート
export default {
  data() {
    return {
      email: "",
      password: ""
    }
  }, 
  methods: {
    login() {　//axiosでログイン用のインスタンスにアクセスするメソッドを定義
      axios.post( //エンドポイントのURLがログイン用のものを使う
        '/accounts:signInWithPassword?key=AIzaSyD4fPRWu_O2Cpp_Rb9mJ1oziq-0VILpqBI',
        {
          email: this.email,　//送る情報は新規登録と同じ
          password: this.password,
          returnSecureToken: true
        }
      ).then((response) => {
        console.log(response); //返ってきたレスポンスをログに表示
      });
      this.email = "";
      this.password = "";
    }
  }
}
</script>

<style>
.input-group {
  margin: 5px;
}
</style>

npm install vuex

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
});

import Vue from 'vue'
import App from './App.vue'
import router from './router';
import store from  './store' //追記

Vue.config.productionTip = false

new Vue({
  router,
  store,　//追記
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    idToken: null
  }, 
  getters: {
    idToken: state => state.idToken
  },
  mutations: {
    updateIdToken(state, idToken) { 
      state.idToken = idToken;
    }
  },
});

<script>
import axios from '../axios-for-auth.js';
export default {
  data() {
    return {
      email: "",
      password: ""
    }
  }, 
  methods: {
    login() {
      axios.post(
        '/accounts:signInWithPassword?key=AIzaSyD4fPRWu_O2Cpp_Rb9mJ1oziq-0VILpqBI',
        {
          email: this.email,
          password: this.password,
          returnSecureToken: true
        }
      ).then((response) => {
        this.$store.commit('updateIdToken', response.data.idToken) //追記
　　　　　this.$router.push('/');　 //追記
      });
      this.email = "";
      this.password = "";
    }
  }
}
</script>

<script>
import axios from '../axios-for-auth.js';
export default {
  data() {
    return {
      email: "",
      password: ""
    }
  },
  methods: {
    register() {
      axios.post(
        '/accounts:signUp?key=AIzaSyD4fPRWu_O2Cpp_Rb9mJ1oziq-0VILpqBI',
        {
          email: this.email,
          password: this.password,
          returnSecureToken: true
        }
      ).then((response) => {
        this.$store.commit('updateIdToken', response.data.idToken);　//追記
　　　　　this.$router.push('/');　 //追記
      });
      this.email = "";
      this.password = "";
    }
  }
}
</script>

import Vue from 'vue';
import Router from 'vue-router';
import Home from './pages/Home.vue';
import About from './pages/About.vue';
import Login from './pages/Login.vue';
import Register from './pages/Register.vue';
import store from './store'; //追記

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/about",
      component: About,
      beforeEnter(to, from, next) {　//追記
        if (store.getters.idToken) { //idTokenがあれば、そのまま"/about"に
          next();
        } else { //なければ"/login"に飛ばす
          next("/login");
        }
      },
    },
    {
      path: "/login",
      component: Login,
      beforeEnter(to, from, next) {　//追記
        if (store.getters.idToken) {　//すでにidTokenがあれば、"/"に飛ばす
          next("/");
        } else { //なければそのまま"/login"に
          next();
        }
      },
    },
    {
      path: "/register",
      component: Register,　
      beforeEnter(to, from, next) {　//追記
        if (store.getters.idToken) {　//すでにidTokenがあれば、"/"に飛ばす
          next("/");
        } else {　//なければそのまま"/register"に
          next();
        }
      },
    },
  ],
});

<template>
  <div>
    <header class="header">
      <router-link to="/" class="header--link">トップ</router-link>
      <router-link to="/about" class="header--link" v-if="isLoggedIn">詳細</router-link>
      <router-link to="/login" class="header--link" v-if="!isLoggedIn">ログイン</router-link>
      <router-link to="/register" class="header--link" v-if="!isLoggedIn">新規登録</router-link>
    </header>
    <router-view></router-view> 
  </div>
</template>

<script>
export default {
  computed: {
    isLoggedIn() {
      return this.$store.getters.idToken !== null;
    }
  }
}
</script>

<template>
  <div class="container">
    <h2>詳細ページです</h2>
    <p>ログインが必要なページです</p>
    <button type="button" @click="logout()">ログアウトする</button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$store.commit('updateIdToken', null);
      this.$router.push('/login');
    }
  }
}
</script>