[nuxt.js その６] middlewareによるナビゲーションガードの実装

middlewareとは

[公式] middlewareの説明
[公式] middlewareプロパティについて

ページがレンダリングされる前に実行してくれるもののようです。今回はこれを使ってナビゲーションガードを設定します。具体的に、特定のページにミドルウェアを設定する場合は以下のように書きます。

~/page/secret.vue

<template>
  <h1>シークレットページ</h1>
</template>

<script>
export default {
  middleware: 'authenticated'
}
</script>

ミドルウェア本体は~/middlewareの下に置きます。

~/middleware/authenticated.js

export default function ({ store, redirect }) {
  // ユーザーが認証されていないときはログインページに飛ばす
  if (!store.getters['auth/email']) {
    return redirect('/user/login')
  }
}

これにより、secret.vueがレンダリングされる前にstoreに格納してある認証情報をチェックしてくれて、認証されていなければログインページにリダイレクトしてくれます。

簡単！