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
2.6k
CLUB p1ass を作った
schktjm
0
210
はじめての npm パッケージ作り
schktjm
0
270
E2E テスト入門
schktjm
0
460
Firebaseでお手軽OGP生成
schktjm
0
580
3時間でつくるいいかんじのポートフォリオサイト
schktjm
1
370
秋の大LT2019 in Aizu
schktjm
0
120
Treasure体験記
schktjm
1
480
Other Decks in Programming
See All in Programming
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
14k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.2k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.4k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
AHC041解説
terryu16
0
590
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building Your Own Lightsaber
phodgson
104
6.2k
Become a Pro
speakerdeck
PRO
26
5.1k
Music & Morning Musume
bryan
46
6.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Agile that works and the tools we love
rasmusluckow
328
21k
Facilitating Awesome Meetings
lara
51
6.2k
Building Applications with DynamoDB
mza
93
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Six Lessons from altMBA
skipperchong
27
3.6k
Speed Design
sergeychernyshev
25
780
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を深く理解できてよかったです
ありがとうございました!