ルートメタフィールドを✅
「39時間」恐ろしや、こちらMVPリリース日(11/15)までの可処分時間です。まだissueの進捗は60%くらいです。控えめにいってやばい。嘆いても仕方ないので、粛々とポートフォリオ作成に勤しみます、、
さて、今回はルートメタフィールドについてを学習していきます。
ルートメタフィールドとは
この、metaによって囲まれた場所を指す。
// メタフィールド
meta: { requiresAuth: true }
ルーターの各レコードを、routes 設定の中の各ルートオブジェクトはルートレコードと呼ばれる。
どう使うのか
下記のようにルートレコードにmetaフィールドを作成する。
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/login',
component: UserLogin,
name: 'UserLogin',
},
{
path: '/profile',
component: UserProfile,
name: 'UserProfile',
meta: { requireAuth: true },
props: true,
},
router.js内にルートメタフィールドを作る。
公式に基づいて作成してみた。
下記コードは、store/users.jsにあるfetchAuthUserが成功した場合のみUserProfileにアクセスできるようにしている。
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requireAuth)) { #...①
store.dispatch('users/fetchAuthUser').then((authUser) => {
if (!authUser) {
next({ name: 'UserLogin' });
} else {
next();
}
});
} else {
next();
}
});
①: ルートにマッチした全てのルートレコードは $route.matched 配列として $route オブジェクト上でアクセスできるので、①では「record.meta.requireAuthが設定されたルートの場合、authUserしかアクセスできない」ようになっている。
つまり、ルートメタフィールドを使用すると、sorceryでいうところのrequire_loginを実装することができるわけだ。
他の用途
下記のようにナビゲーションガードと組み合わせることで、遷移先のタイトルを動的に表示させることもできる。
const router = new Router({
routes: [
{ path: '/analyze', component: Analyze, meta: { title: '診断ページ' } },
{ path: '/result', component: Result, meta: { title: '結果表示ページ' } }
]
})
router.afterEach((to, from) => {
if (to.meta && to.meta.title) {
document.title = to.meta.title
}
})
ルーターの機能によってタイトルを差し替えられるわけではないため、ルートメタフィールドで各ルートのタイトルを定義しておいて、ナビゲーションガードでページ遷移時にタイトルを変更している。
ページ遷移後にmetaのtitleを描画したいのでafterEachを使用している。
まとめ
- ルートメタフィールドを使用すると、sorceryでいうrequire_loginを実装することができる。
- ナビゲーションガードと組み合わせることで、content_forのようにタイトルをページごとに設定することができる。
