2020-01-13

【Vue Router】ブラウザバック（戻るボタン）で beforeEach() がうまく動作しない

Vue Routerを利用した認証機能付きSPAで、ログイン状態でログインフォーム（/login）にアクセスした際、ホーム画面（/home）に強制遷移させたい。

Vue Router の beforeEach() を利用して以下のように記述。（認証状態はVuexに持たせています）

router.beforeEach((to, from, next) => {
  if (!to.meta.requireAuth && store.state.auth.isAuth) {
    next('/home');
  }
  next();
}

Vue Router を利用したリダイレクト this.$router.push('/login') や、ページリロードした場合には上記 beforeEach() が機能するが、ブラウザの戻るボタンを押したときにはそのままログインフォームに戻ってしまう。

mounted() {
  if (this.$store.state.auth.isAuth) {
    this.$router.push('/home');
  }
}

ブラウザバックによるページ遷移制御をVue Routerで行うのは限度があるので、Vueコンポーネント側で対処する。

せっかくVue Routerがあるのに…という感じだが仕方ない。ブラウザバックは厄介なので…