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.5k
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.5k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.2k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
2.9k
CLUB p1ass を作った
schktjm
0
240
はじめての npm パッケージ作り
schktjm
0
300
E2E テスト入門
schktjm
0
480
Firebaseでお手軽OGP生成
schktjm
0
620
3時間でつくるいいかんじのポートフォリオサイト
schktjm
1
390
秋の大LT2019 in Aizu
schktjm
0
130
Other Decks in Programming
See All in Programming
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
One Enishi After Another
snoozer05
PRO
0
160
CSC305 Lecture 11
javiergs
PRO
0
270
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
450
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.8k
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
CSC509 Lecture 08
javiergs
PRO
0
260
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Featured
See All Featured
Site-Speed That Sticks
csswizardry
13
930
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Cult of Friendly URLs
andyhume
79
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
RailsConf 2023
tenderlove
30
1.3k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Faster Mobile Websites
deanohume
310
31k
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を深く理解できてよかったです
ありがとうございました!