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
980
ゼロから始めるアクセシビリティ啓蒙活動
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
520
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
880
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
350
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
790
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
効率的な開発手段として VRTを活用する
ishkawa
0
130
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
430
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
76
25k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
694
190k
It's Worth the Effort
3n
185
28k
Building Applications with DynamoDB
mza
95
6.5k
BBQ
matthewcrist
89
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Language of Interfaces
destraynor
158
25k
Fireside Chat
paigeccino
37
3.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Writing Fast Ruby
sferik
628
62k
Making Projects Easy
brettharned
116
6.3k
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を深く理解できてよかったです
ありがとうございました!