【VueRouter】URLを直接入力して画面遷移するのを防ぐ

①ユーザー認証画面=>②パスワード変更画面のようにステップを踏んで画面遷移するようなフローがある場合、②パスワード変更画面に直接遷移されては困ります。VueRouterで提供されている機能を利用することで、これを防ぐことができます。

目標

• URLを直接入力して遷移することを防ぐ

前提・バージョンなど

• VueRouter4を使用

実装

VueRouterが提供するSTART_LOCATIONという定数をインポートして利用します。この定数には、「Vue RouterがどのURLから始まるか」という情報が入っています。「アプリケーション内で、VueRouterが管轄している一番最初のルート」みたいなイメージです。多くの場合は、以下のようなオブジェクトが格納されています。

{
    "path": "/",
    "params": {},
    "query": {},
    "hash": "",
    "fullPath": "/",
    "matched": [],
    "meta": {}
}

直接遷移されてほしくないルートに、beforeEnterを追加します。第二引数のfromには、遷移前のルート情報が入ります。画面に直接URLを入力して遷移した場合、fromにはSTART_LOCATIONと同じ状態のオブジェクトが入ります。
これを利用して、fromがSTART_LOCATIONと同じ場合には、別の画面に遷移させるような処理を追加します。

{
  path: "/reset-password/:userId",
  name: "ResetPassword",
  component: () => import("@/views/Users/ResetPassword.vue"),
  beforeEnter: (_, from, next) => {
    if (from === START_LOCATION) {
      next({
        name: "ResetPasswordUserName", // 遷移先のルート名
      });
    } else {
      next();
    }
  },
},

これで、ブラウザでURLを直接入力して遷移することができないようになりました👏

この画面にいる状態で、画面をリロードすることもできなくなる点にご注意ください。