Nuxt.js(SPAモード)でユーザー認証を効率的にする方法を解説

今回は、Nuxt(SPAモード)で、ミドルウェアを使いユーザー認証をする方法を解説します。

user/authというエンドポイントが、クッキーやローカルストレージを元に認証済みユーザーを返すAPIだとします。

以下のように、Vuexにuserが登録されていなければ、authを呼び出すことで、APIの呼び出しを抑えてログイン処理を書くことが出来ます。

クッキーやローカルストレージにトークンが保存されてるブラウザで、Nuxtアプリに訪れた時に任意のページについてユーザー認証を済ませることが出来ます。

middleware/auth.js

export default async ({store}) => {
  if (!store.getters['user']) {
    await store.dispatch('auth')
  }
}

nuxt.config.js

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

store/index.js

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

export const getters = {
  user: (state) => state.user,
}
export const mutations = {
  setUser(state, { user }) {
    state.user = user
  }
}
export const actions = {
  async auth({ commit }) {
    const user = await this.$axios.$get(`/users/auth`)
    commit('setUser', { user })
  }
}

終わりに

私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話