Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
vuexとvue-routerとあれこれ
Search
Tajima Sachiko
December 24, 2019
Programming
0
1.4k
vuexとvue-routerとあれこれ
#aizu_fun_lt の資料です。
Tajima Sachiko
December 24, 2019
Tweet
Share
More Decks by Tajima Sachiko
See All by Tajima Sachiko
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
2
940
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
2.8k
CLUB p1ass を作った
schktjm
0
240
はじめての npm パッケージ作り
schktjm
0
290
E2E テスト入門
schktjm
0
480
Firebaseでお手軽OGP生成
schktjm
0
610
3時間でつくるいいかんじのポートフォリオサイト
schktjm
1
390
秋の大LT2019 in Aizu
schktjm
0
130
Treasure体験記
schktjm
1
510
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
190
XSLTで作るBrainfuck処理系
makki_d
0
210
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
VS Code Update for GitHub Copilot
74th
1
380
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
5つのアンチパターンから学ぶLT設計
narihara
1
110
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
For a Future-Friendly Web
brad_frost
179
9.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
4 Signs Your Business is Dying
shpigford
184
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Site-Speed That Sticks
csswizardry
10
660
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Being A Developer After 40
akosma
90
590k
Transcript
vuexとvue-router とあれこれ たじま ( @schktjm #aizu_fun_lt
メリークリスマス
今日言うこと - 自己紹介 - リロードの挙動とvuex - vuexのactionのエラーハンドリングの話 - 問題点 -
vue routerはすごい
自己紹介 - 田嶋幸智子 ( @schktjm - やってること - フロントエンド: Vue,
React, TS - 競プロ: 緑 - 好きなこと - スノボー - バイク
そもそも セッショントークンが切れている場合、読み込み時にAPIが401を返しなにも 見えないエラーが発生
そこで とりあえず、セッショントークンなど切れている場合ログイン画面に飛ばしたい。
App.vueのcreatedで トークンが無効 ↓ /login に飛ばす をするとエラーがconsoleに出力 されてしまう 改善案1
問題(再生できなかったらデモ
改善案2 vue-routerのナビゲーショ ンガード: 遷移時点( 画面が読み込ま れる前 ) でトークンが有効 かどうかを判定しログイン 画面に飛ばす。
実際のコード router/index.js
成功例 ( 再生でk(ry
そもそもの問題が 「リロード時にvuexのstoreの値が初期化されてしまう」から 始まった問題ですがvue-routerを深く理解できてよかったです
ありがとうございました!