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.2k
vuexとvue-routerとあれこれ
#aizu_fun_lt の資料です。
Tajima Sachiko
December 24, 2019
Tweet
Share
More Decks by Tajima Sachiko
See All by Tajima Sachiko
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
1
1.9k
CLUB p1ass を作った
schktjm
0
190
はじめての npm パッケージ作り
schktjm
0
230
E2E テスト入門
schktjm
0
430
Firebaseでお手軽OGP生成
schktjm
0
520
3時間でつくるいいかんじのポートフォリオサイト
schktjm
1
340
秋の大LT2019 in Aizu
schktjm
0
90
Treasure体験記
schktjm
1
400
Other Decks in Programming
See All in Programming
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
Elm 0.19.0 Changes
bkuhlmann
0
480
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
エンターテイメント業界で利用されるAWS
demuyan
0
200
Hanami and htmx
bkuhlmann
0
190
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
7
3.4k
元気予報
suu_mire0726
0
850
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
Ruby GitHub Packages
bkuhlmann
0
620
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Ruby is Unlike a Banana
tanoku
96
10k
Scaling GitHub
holman
457
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Gamification - CAS2011
davidbonilla
76
4.6k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
How to Ace a Technical Interview
jacobian
272
22k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
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を深く理解できてよかったです
ありがとうございました!