はじめに
Nuxt.jsでmiddleware
を使用したページ制限(管理者)を担当したのでその備忘録
環境
MacOs
docker環境
前提条件
- authModuleを使用したログイン機能が実装されている
- ログイン後vuexにユーザー情報が保存されている
まだの方はこちらを参考にどうぞ
この記事を読んでできること
vuexに保存されているユーザー情報で各ページに制限をかける
(今回はユーザーのadmin
カラムがtrue
or false
でページ制限をかけます)
middlewareってなに?
- ページが表示される前に実行される関数
- 外部JSに記述するもの
- ファイル共通化ができるため、ページ制限で利用される
middlewareディレクトリの作成
front $ mkdir middleware
front $ touch redirect.js
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ファイル作成
<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のファイルが読み込みできるのでシンプルでよいですね
これを使えば特殊なページ遷移も楽にできるのでぜひ使ってみてください
最後まで見ていただきありがとうございました。
Comments
Let's comment your feelings that are more than good