成り行き

Nuxtを使用しているアプリを作成中、ログイン後の二段階認証ページなどログインした後にアクセスしてほしくないページにアドレス直打ちで入れることに気づきました。

Nuxtにはmiddlewareというページレンダリングを行う前に設定されたメソッドを実行してくれるAPIがあります。今回はmiddlewareを用いて、特定のページ以外からのアクセスを行なった場合リダイレクトするようにしました。

コード

auth.js

export default function({ from, redirect }) {
  if (!from || from.path !== '/login') { // 利用される場合、/loginには任意のパスを入れてください
    redirect('/');
  }
}

あとはこれをページのmiddlewareプロパティに設定するだけです。

解説

fromは遷移元のrouteデータが入っています。
今回の場合ログイン後に表示される二段階認証ページへのアクセスを制限したかったので、fromに入っているpathが/login以外だった場合リダイレクトが実行されるようにしました。
またアドレス直打ちの場合、fromはundefinedになっていたのでその場合も含めました。（個人的にはこちらがメイン）

Nuxt - API: コンテキスト