Nuxt.jsを使用したユーザー認証の実装方法

1. Nuxt アプリケーションのセットアップ: まず、Nuxt.jsアプリケーションをセットアップします。Nuxtの公式ドキュメントに従って、npx create-nuxt-appコマンドを使用して新しいプロジェクトを作成します。

2. ユーザー認証の設定: Nuxt.jsでは、@nuxtjs/authモジュールを使用してユーザー認証を簡単に実装することができます。まず、プロジェクトのルートディレクトリで、npm install @nuxtjs/authコマンドを使用してモジュールをインストールします。

3. 認証ミドルウェアの作成: 次に、middlewareディレクトリ内にauth.jsという名前のファイルを作成します。このミドルウェアは、認証が必要なページにアクセスする前に実行される処理を定義します。以下は、ユーザーがログインしているかどうかを確認するミドルウェアの例です。

// middleware/auth.js
export default function ({ store, redirect }) {
  if (!store.state.auth.loggedIn) {
    return redirect('/login')
  }
}

4. 認証ルートの設定: Nuxt.jsのnuxt.config.jsファイルに、認証が必要なルートを設定します。以下は、/dashboardルートが認証を必要とする例です。

// nuxt.config.js
export default {
  // ...
  router: {
    middleware: ['auth'],
  },
}

// ログインの例
this.$auth.loginWith('local', {
  data: {
    username: 'ユーザー名',
    password: 'パスワード',
  },
})
// ログアウトの例
this.$auth.logout()