[Nuxt.js] middlewareでページのアクセス制御を行う

概要

権限等である特定の画面へのアクセスを不可とする制御を行うために
以下のように実装を行なったので、メモとして書き残しておく。

詳細

• ページの閲覧が不可の権限の場合、403ページ（/pages/403.vue）へリダイレクトする設定を middleware配下のファイルに記載

/middleware/page_control.js

export default ({ store, redirect }) {
    if (store.getters['auth'] === 1) {
        // 403ページにリダイレクト
        redirect('/403');
    }
}

• アクセス制御を行いたいページに以下の設定を追加

/pages/list.vue

<script>
export default {
    middleware: ['page_control'],
}
</script>

middlewareで設定した権限のユーザーが一覧画面（list.vue）にアクセスをした場合
403のページにリダイレクトされ、一覧画面は閲覧不可となる