【Vue】ルートメタフィールドを✅
RUNTEQのインタビュー記事やTwitterでしか見たことのない偉大な卒業生たちと会話をする事ができてとても喜んでいること23期髪切って誰か分からないです。
村田講師に助けていただき、酒ケジュール取得のコンポーネントを外部に切り出すことに成功しました！javascriptの非同期処理、そしてwebpackerは謎が多い。。
さて、今回はルートメタフィールドについてを学習していきます。
ルートメタフィールドとは
この、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のようにタイトルをページごとに設定することができる。
