NuxtとGoではじめるWebアプリ開発を読んで勉強 vol.3

はじめに

こんばんは。

前回の続きです。

kojirooooocks.hatenablog.com

NuxtとGoではじめるWebアプリ開発 (技術の泉シリーズ（NextPublishing）)

作者:寺田晃大
インプレスR&D

Amazon

今回は7章〜8章まで

本題

各バージョン

go

$ go version
go version go1.18 darwin/amd64

echo

$ go get github.com/labstack/echo/v4
go: added github.com/labstack/echo/v4 v4.7.2

nuxt

"nuxt": "^2.15.8"

とりあえず成果

所感

今回は１点、farebase周りで本のままだとよろしくない箇所がありました。

本のままだと version8の状態での使用方法になっており、現在はversion9になっており本のままだと動きませんでした。

plugins/firebases.js

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

const firebaseApp = initializeApp({
  apiKey: 'xxxxxxx',
  authDomain: 'xxxxxxx.firebaseapp.com',
  projectId: 'xxxxxxx',
  storageBucket: 'xxxxxxx.appspot.com',
  messagingSenderId: 'zzzzzzzzzzzz',
  appId: 'yyyyyyyyyyyyyyyyy'
})

const auth = getAuth(firebaseApp)
export default auth

使用方法は以下のようになりました。

store/index.js

import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth'
import auth from '~/plugins/firebases'

export const actions = {
  // signup
  async signUp ({ commit }, payload) {
    await createUserWithEmailAndPassword(auth, payload.email, payload.password)
      .then((userCredential) => {
        const user = userCredential.user
        const token = user.getIdToken()
        this.$cookies.set('jwt_token', token)
        commit('mutateToken', token)
        this.app.router.push('/')
      })
      .catch((error) => {
        console.log(error)
        alert('登録できませんでした。')
      })
  },

  // login
  async login ({ commit }, payload) {
    await signInWithEmailAndPassword(auth, payload.email, payload.password)
      .then((userCredential) => {
        const user = userCredential.user
        const token = user.getIdToken()
        this.$cookies.set('jwt_token', token)
        commit('mutateToken', token)
        this.app.router.push('/')
      })
      .catch((error) => {
        console.log(error)
        alert('ログインできませんでした。')
      })
  },

  // logout
  async logout ({ commit }) {
    await signOut(auth)
      .then(() => {
        commit('mutateToken', null)
        this.$cookies.remove('jwt_token')
        this.app.router.push('/login')
      })
      .catch((error) => {
        console.log(error)
        alert('ログアウトできませんでした。')
      })
  }
}

8章はmysqlのセットアップです。一応やったのですが、できればfirestoreとかで保存してみたいものでs。

次回は9章からです。

現場からは以上です。