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