vuexとvue-routerとあれこれ

#aizu_fun_lt の資料です。

Transcript

1. vuexとvue-router とあれこれ たじま ( @schktjm #aizu_fun_lt
2. メリークリスマス
3. 今日言うこと - 自己紹介 - リロードの挙動とvuex - vuexのactionのエラーハンドリングの話 - 問題点 - vue routerはすごい
4. 自己紹介 - 田嶋幸智子 ( @schktjm - やってること - フロントエンド: Vue, React, TS - 競プロ: 緑 - 好きなこと - スノボー - バイク
5. そもそも セッショントークンが切れている場合、読み込み時にAPIが401を返しなにも 見えないエラーが発生
6. そこで とりあえず、セッショントークンなど切れている場合ログイン画面に飛ばしたい。
7. App.vueのcreatedで トークンが無効 ↓ /login に飛ばす をするとエラーがconsoleに出力 されてしまう 改善案1
8. 問題(再生できなかったらデモ
9. 改善案2 vue-routerのナビゲーショ ンガード： 遷移時点( 画面が読み込ま れる前 ) でトークンが有効 かどうかを判定しログイン 画面に飛ばす。
10. 実際のコード router/index.js
11. 成功例 ( 再生でk(ry
12. そもそもの問題が 「リロード時にvuexのstoreの値が初期化されてしまう」から 始まった問題ですがvue-routerを深く理解できてよかったです
13. ありがとうございました！