VueRouterのナビゲーションガードを✅
ログインしていなかったらログイン画面に遷移させたり、診断画面結果表示の前は特定の画面を表示させるようにしたい。
この画面はここからアクセスしてきた方のみ閲覧可能ですよ〜というようなものがあるらしい。
ナビゲーションガードというらしい。学習していきたい。
ナビゲーションガードとは？
画面にルーティングされる前にパラメータのバリデーションをして、アクセスのガードをすることができる。
この画面はこのコンポーネントからのアクセスからしか許しませんよ！ってことかな。
vue-routerを入れることで使用することができるようで。
グローバルビフォーガード
いつナビゲーションがトリガーされようとも、グローバル before ガードは作られた順番で呼び出されます。ガードは非同期に解決されるかもしれません。そしてそのナビゲーションは全てのフックが解決されるまで 未解決状態 として扱われます。
基本的な使い方
router.beforeEach((to, from, next) => {
// ...
})
全てのガード関数は 3 つの引数を受け取る。下のように、to,from,nextを使う。
to: Route: 次にナビゲーションされる対象の ルートオブジェクト。from: Route: ナビゲーションされる前の現在のルートです。next: Function: フックを 解決 するためにこの関数を呼ぶ必要があります。この振る舞いはnextに渡される引数に依存します:
次のページに移動する間にチェック機能が入るといったイメージ。
そして、ルートナビゲーション処理は
・グローバル
・ルート単位
・コンポーネント内
の３つで使用が可能。
ルートごとのガード
例えばbeforeEnter ガードは、ルートの構成オブジェクトに直接定義することができる。これがルート単位のルートナビゲーション処理になる。
[
name: Test,
component: Test,
beforeEnter: (to, from, next) => {
# ここに処理を記載する
next(); # ガードを通過しページ遷移する場合はnext()を使用する。
]
例えば
「testにアクセスできるのはURLに渡されてきたidが1のユーザーのみにする」コードを実践しようとしたら下記のようになる。
{
path: '/test',
name: Test,
component: Test,
beforeEnter: (to, from, next) => {
function validation() {
if (to.params.id === 1) return true;
return false;
}
if (validation()) {
next(); # 正常に遷移した場合
} else {
next({ path: 'notfound' });
# next()はpath等指定し失敗時に特定の場所に飛ばすことも可能
}
}
}
beforeRouteEnter(to, from, next) {
if ([from.name](<http://from.name/>) === 'UserRegister')
#UserRegisterコンポーネントからのアクセスされた場合
next((self) => {
self.fetchAuthUser().then((authUser) => {
#fetchAuthUserを実行。
if (authUser)
#実行に成功した場合dataで定義しているisVisibleFirstGreetingをtrueにする。
return (self.isVisibleFirstGreeting = true);
});
});
#最後にnext()を記述することで失敗時にも画面遷移ができるようにする。
else next();
},
今回はisVisibleFirstGreetingを起動するかどうかを判定するだけ。
「UserRegisterからアクセスされた場合のみisVisibleFirstGreetingをtrueにする」というロジックを組み立てるのにこのコードを使っている。
リダイレクト機能
リダイレクト機能も準備されているみたい。
これを使ってログイン時の挙動を制御してもいい。
routes: [{ path: '/test, redirect: { name: 'UserLogin' } }]
})
まとめ
・sorceryのrequire＿loginと同じ挙動を用意することができる。
・もしこのコンポーネントからアクセスしてきた場合はこのメソッドを実行するという挙動を実装できる。
・直感的で使いやすそう。
参考文献
https://runebook.dev/ja/docs/vue_router/guide/advanced/navigation-guards
