秋の大LT2019 in Aizu

Vue.jsのSPAで、セッショントークンが切れている場合にナビゲーションガードを利用してログイン画面にとばす処理を書いてその知見をLTにしました。

途中だいぶテキトーでごめんなさい。
マサカリ待ってます！

Transcript

1. ぼくの さいきょうの (さいじゃく) しんちょく
2. 自己紹介 名前: たじま(schktjm) 分野: フロントエンド(Vue, React), デザイン 趣味: バイク, 日本酒 好きなwebサービス: Twitter
3. 目次 - vuexとは - vue-routerとは - 使う場面 - なにがいいか - 今回ぶち当たった問題と解決方法
4. vuexとは？ 参考 https://vuex.vuejs.org/ja/ - Vue.jsアプリケーションのための状態管理パターン+ライブラリ - conponent間のバケツリレーを楽にしてくれる - 実質グローバルなので管理が大変
5. vue-routerとは？ - Vue.js の公式ルータ。 - ルーティングがめっちゃ楽。 - https://router.vuejs.org/ja/
6. ぶちあたった問題！ ログイン状態や、セッショントークンを vuexで管理していたSPAをつくっていました。 isValidToken というAPIが生えていて、vuexのactionからトークンが有効かどうかたしかめられます。 ここで、 セッショントークンが切れている時にリロードすると API呼んでいるところで402になり上手くできない。 トークンが有効の時はそのまま、 トークンが無効な時はログイン画面に飛ばしたい。
7. 最初にやった方法 1. App.vueのcreated()で、トークンが有効かどうか調べる。 2. 有効ならそのままリロード、無効ならログインページへ遷移
8. 何が起こったか 見た目ではログインページに遷移しているが、子コンポーネントで呼ばれるAPIが402に なっている。 （コンソールを開かなきゃバレない）
9. なぜか どうやらインスタンスが作られた場合、 再帰的に子コンポーネントのcreatedも 行われるっぽい。createdでやっては意 味がない。 App.vue Home.vue About.vue HelloWorld Hoge.vue ChildHoge router-view
10. (子コンポーネントを含めたインスタンスのライフサイクル私の ggr 力も足りなくて見つからなかったので詳しい方教えてください )
11. そこでvue-routerの本気 :heart: twitterでわからないよ〜と嘆いていたところ、vue-routerのナビゲーションブロックを使 うといいよとおしえてもらいました。:god: この名前が示すように、vue-router によって提供されるナビゲーションガードは、リダイレ クトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビ ゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法が あります。 https://router.vuejs.org/ja/guide/advanced/navigation-guards.html
12. もうちょい詳しくグローバルビフォーガード • to: Route: 次にナビゲーションされる対象の ルートオブジェクト。 • from: Route: ナビゲーションされる前の現在のルートです。 • next: Function : フックを 解決 するためにこの関数を呼ぶ必要があります。この振る舞いは next に渡される引数に 依存します:
13. • next(): パイプラインの次のフックに移動します。もしフックが残っていない場合は、このナビゲーションは 確立 されます。 • next(false): 現在のナビゲーションを中止します。もしブラウザのURLが変化した場合は（ユーザーが手動で変更した場合で も、戻るボタンの場合でも）、 from ルートのURLにリセットされます。 • next('/') または next({ path: '/' }) : 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナ ビゲーションが始まります。任意のロケーションオブジェクトを next に渡すことができます。この next には、replace: true、 name: 'home' のようなオプション、そして router-link、to プロパティまたは router.pushで使用される任意のオプションを指 定することができます。
14. とりあえず、それまでの遷移先でよければ、 next() /login などに飛ばしたい場合 next(‘/login’)
15. ナビゲーションガードには コンポーネントガードがあり、 beforeRouteEnter beforeRouteUpdate beforeRouteLeave がある
16. ここで問題！ 遷移をする前に、vuexのactionにおける `isValidToken` を叩いて、トークンが有効かどう かを確かめたい。 いつもだったら、this.$store をするところですが、beforeEach, beforeEnter, BeforeRouteEnterはコンポーネントを絵画するルートが確立する前に呼ぶため、thisが 使えない。 どうすれば。。。(ここに1週間詰まった)
17. 正解
18. あ、はい
19. とのことなのでこんな風になりました
20. めでたしめでたし githubに今回のテストコードをあげてるので よければ見てください！