はじめに

Nuxt.jsでmiddlewareを使用したページ制限(管理者)を担当したのでその備忘録

環境

MacOs
docker環境

前提条件

authModuleを使用したログイン機能が実装されている
ログイン後vuexにユーザー情報が保存されている

まだの方はこちらを参考にどうぞ

この記事を読んでできること

vuexに保存されているユーザー情報で各ページに制限をかける
(今回はユーザーのadminカラムがtrue or false でページ制限をかけます)

middlewareってなに？

ページが表示される前に実行される関数
外部JSに記述するもの
ファイル共通化ができるため、ページ制限で利用される

middlewareディレクトリの作成

front $ mkdir middleware
front $ touch redirect.js

redirect.jsファイル作成

middleware/redirect.js

export default function ({ store, redirect }) {
  const user = store.getters['user_information/getUser'] // ユーザー情報を保存しているvuexのファイルを指定してください
  if (user && !user.admin) {
    redirect('/')
    store.dispatch(
      'flashMessage/showMessage',
      {
        message: '権限がありません',
        type: 'error',
        status: true
      }
    )
  } else if (!user) {
    redirect('/')
    store.dispatch(
      'flashMessage/showMessage',
      {
        message: 'ログインしてください',
        type: 'error',
        status: true
      }
    )
  }
}

sample.vueファイル作成

pages/sample.vue

<template>
  <div>
    <p>Hello World</p>
  </div>
</template>

<script>
export default {
  name: 'Sample',
  middleware: 'redirect', // middlewareのredirect.jsを読み込み
  auth: false // falseと表記しないと未ログインでアクセスした時にauthModuleで設定したルートへリダイレクトされる
}
</script>

ページ遷移確認

dockerコンテナを起動して確認

root $ docker-compose up

①未ログイン状態でlocalhost:8080/sampleへアクセス
(ログインしていないため、アクセス制限がかかります)

②一般ユーザーでログインして、再度localhost:8080/sampleへアクセス
(adminではないため、アクセス制限がかかります)
　

③管理者でログインして、再度localhost:8080/sampleへアクセス
sample.vueの遷移が成功しHello Worldが表示されます

最後に

各々のcompomentから共通のmiddlewareのファイルが読み込みできるのでシンプルでよいですね
これを使えば特殊なページ遷移も楽にできるのでぜひ使ってみてください

最後まで見ていただきありがとうございました。