Nuxt.jsとfirebase(ログイン/ログアウト機能)

Vue.js

Nuxt.jsとfirebase(ログイン/ログアウト機能)を実装する方法です。

Nuxt.jsとfirebase(ログイン機能)

Nuxt.jsでfirebaseを使う方法はNuxt.jsでfirebaseを使う方法を参考にしてみてください。

ログインページの作成

layoutsフォルダとpagesフォルダにログインのvueファイルを作成します。
pagesのvueファイルには、ログインのためのメソッドを記述します。

<script>

export default {
  layout:'signin',
  data() {
    return {
      snackbar: false,
      snackbarText: 'エラーはありません',
      auth: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      let that = this
      this.$fire.auth.signInWithEmailAndPassword(this.auth.email, this.auth.password)
      .catch(function(error) {
        that.snackbarText = error.message
        that.snackbar = true
      }).then((user) => {
        $nuxt.$router.push('/')
      })
    }
  }
}</script>

storeにindex.jsを作成する

Nuxt.jsでfirebaseを使う方法の通りに設定した場合、nuxt.config.jsのservicesの部分で

onAuthStateChangedAction: 'onAuthStateChangedAction',

と設定されているので、onAuthStateChangedActionを作成するために、storeにindex.jsを作成して下のように記述します。

const state = () => ({
  user: null,
})

const mutations = {
  SET_USER(state, user) {
    state.user = user
  }
}

const actions = {
  async onAuthStateChangedAction(state, { authUser, claims }) {
    if (!authUser) {
      // authされていない場合
      state.commit('SET_USER', null)

      // リダイレクトの設定
      this.$router.push({
        path: '/auth/aignin',
      })
    } else {
      // authされている場合
      const { uid, email } = authUser
      state.commit('SET_USER', {
        uid,
        email,
      })
    }
  }
}

const getters = {
  getUser(state) {
    return state.user
  }
}

export default {
  state,
  mutations,
  actions,
  getters,
}

state,mutations,actions,gettersをそれぞれ設定します。
リダイレクトの設定は必要なパスに書き換えましょう。

Nuxt.jsとfirebase(ログアウト機能)

ログアウトページの作成

pagesフォルダにログアウトのvueファイルを作成します。
そしてメソッドを記述します。

<script>

export default {
  asyncData() {
    $nuxt.$fire.auth.signOut()
  }
}</script>

signOut()でログアウトできます。

middlewareの設定

middlewareにauth.jsを作成して次のように記述します。

export default function ({app, route, redirect}) {
  // ログインページでない場合
  if(route.path !== '/auth/signin') {

    if(!app.$fire.auth.currentUser) {
      return redirect('/auth/signin')
    }

  // ログインページの場合
  } else if (route.path === '/auth/signin') {
    if(!app.$fire.auth.currentUser) {

    } else {
      return redirect('/')
    }
  }
}

まず、ログインページにアクセスされていない場合でかつ、現在のユーザーでなければログインページにリダイレクトさせます。
ログインページにアクセスしている場合でかつ、現在のユーザーでなければログインページにリダイレクトさせます。
そして、ログインページにアクセスしている場合でかつ、現在のユーザーであればメインのページにとべるように設定します。

nuxt.config.jsの設定

routerを使うので、nuxt.config.jsのpluginsの下あたりに以下を追記します。

plugins: [
],
router: {
  middleware: ['auth']
},

Vue.js

Posted by devsakaso