ぼくの さいきょうの (さいじゃく) しんちょく 

自己紹介 名前: たじま(schktjm) 分野: フロントエンド(Vue, React), デザイン 趣味: バイク, 日本酒 好きなwebサービス: Twitter 

目次 - vuexとは - vue-routerとは - 使う場面 - なにがいいか - 今回ぶち当たった問題と解決方法 

vuexとは？ 参考 https://vuex.vuejs.org/ja/ - Vue.jsアプリケーションのための状態管理パターン+ライブラリ - conponent間のバケツリレーを楽にしてくれる - 実質グローバルなので管理が大変 

vue-routerとは？ - Vue.js の公式ルータ。 - ルーティングがめっちゃ楽。 - https://router.vuejs.org/ja/ 

ぶちあたった問題！ ログイン状態や、セッショントークンを vuexで管理していたSPAをつくっていました。 isValidToken というAPIが生えていて、vuexのactionからトークンが有効かどうかたしかめられます。 ここで、 セッショントークンが切れている時にリロードすると API呼んでいるところで402になり上手くできない。 トークンが有効の時はそのまま、 トークンが無効な時はログイン画面に飛ばしたい。 

最初にやった方法 1. App.vueのcreated()で、トークンが有効かどうか調べる。 2. 有効ならそのままリロード、無効ならログインページへ遷移 

何が起こったか 見た目ではログインページに遷移しているが、子コンポーネントで呼ばれるAPIが402に なっている。 （コンソールを開かなきゃバレない） 

なぜか どうやらインスタンスが作られた場合、 再帰的に子コンポーネントのcreatedも 行われるっぽい。createdでやっては意 味がない。 App.vue Home.vue About.vue HelloWorld Hoge.vue ChildHoge router-view 

(子コンポーネントを含めたインスタンスのライフサイクル私の ggr 力も足りなくて見つからなかったので詳しい方教えてください ) 

そこでvue-routerの本気 :heart: twitterでわからないよ〜と嘆いていたところ、vue-routerのナビゲーションブロックを使 うといいよとおしえてもらいました。:god: この名前が示すように、vue-router によって提供されるナビゲーションガードは、リダイレ クトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビ ゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法が あります。 https://router.vuejs.org/ja/guide/advanced/navigation-guards.html 

もうちょい詳しくグローバルビフォーガード ● to: Route: 次にナビゲーションされる対象の ルートオブジェクト。 ● from: Route: ナビゲーションされる前の現在のルートです。 ● next: Function : フックを 解決 するためにこの関数を呼ぶ必要があります。この振る舞いは next に渡される引数に 依存します: 

● next(): パイプラインの次のフックに移動します。もしフックが残っていない場合は、このナビゲーションは 確立 されます。 ● next(false): 現在のナビゲーションを中止します。もしブラウザのURLが変化した場合は（ユーザーが手動で変更した場合で も、戻るボタンの場合でも）、 from ルートのURLにリセットされます。 ● next('/') または next({ path: '/' }) : 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナ ビゲーションが始まります。任意のロケーションオブジェクトを next に渡すことができます。この next には、replace: true、 name: 'home' のようなオプション、そして router-link、to プロパティまたは router.pushで使用される任意のオプションを指 定することができます。 

とりあえず、それまでの遷移先でよければ、 next() /login などに飛ばしたい場合 next(‘/login’) 

ナビゲーションガードには コンポーネントガードがあり、 beforeRouteEnter beforeRouteUpdate beforeRouteLeave がある 

ここで問題！ 遷移をする前に、vuexのactionにおける `isValidToken` を叩いて、トークンが有効かどう かを確かめたい。 いつもだったら、this.$store をするところですが、beforeEach, beforeEnter, BeforeRouteEnterはコンポーネントを絵画するルートが確立する前に呼ぶため、thisが 使えない。 どうすれば。。。(ここに1週間詰まった) 

正解 

あ、はい 

とのことなのでこんな風になりました 

めでたしめでたし githubに今回のテストコードをあげてるので よければ見てください！