かとのぼのマイコード・マイライフ

ウェブサービス開発とプログラミングと雑記ブログ

ログイン認証後にもともとの閲覧したかったページにリダイレクトする方法【Vue.js】【ログイン認証】

Vue.jsで、Vue Routerを使っている場合の話です。

ログインが必要な画面で、ログイン認証のページで一旦ログインしてもらった後に、もともと行きたかったページにリダイレクトして表示する方法のメモです。

router.beforeEachにクエリーを持たせておく

 結論ですが、ルーターでデータを保持させておけばログイン認証後にそのページへリダイレクトさせることができます。

こちらの記事がわかりやすいです。

Vue.js 2.0 でログイン (vue-router で認証が必要な URL を定義) - Qiita

 

具体的には、router.beforeEachのところで、query: { redirect: to.fullPath }として保持しておけば大丈夫です。

ログイン認証後にrouter.push(this.$route.query.redirect)で変遷します。もしページが違うならthis.$router.push(this.$route.query.redirect)でOK。