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
Benchmark
sysong
0
270
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Code Review Best Practice
trishagee
68
18k
How to Ace a Technical Interview
jacobian
277
23k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
RailsConf 2023
tenderlove
30
1.1k
Statistics for Hackers
jakevdp
799
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Embracing the Ebb and Flow
colly
86
4.7k
Building an army of robots
kneath
306
45k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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を深く理解できてよかったです
ありがとうございました!