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に格納してある認証情報をチェックしてくれて、認証されていなければログインページにリダイレクトしてくれます。
簡単!