JavaScript
authentication
SPA
vue.js
nuxt.js

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

こんにちは、とくめいチャットサービス「ネコチャ」運営者のアカネヤ(@ToshioAkaneya)です。

今回は、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 })
}
}



はてなブックマーク・Pocketはこちらから

はてなブックマークに追加

Pocketに追加