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
SPA & JWT でWeb アプリケーションを作る
Search
Shunta Saito
August 28, 2019
Programming
0
220
SPA & JWT でWeb アプリケーションを作る
Node.jsなAPIサーバとReactを用いたかんたんなSPAを、Fetch API & JWTを使いつつ繋ぎこむサンプルコードを見ながら、JWTの活用方法事例をご紹介します。
Shunta Saito
August 28, 2019
Tweet
Share
More Decks by Shunta Saito
See All by Shunta Saito
Nuxt.jsの静的サイト 出力を試してみる
subuta
0
540
Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る
subuta
0
340
Tailwind CSSでいろんなUIをつくる
subuta
3
1.2k
JestとWallaby.jsで始める楽しいJavaScript testing
subuta
2
1.5k
jspmで爆速開発する
subuta
1
1.3k
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
エンジニア向け採用ピッチ資料
inusan
0
180
PipeCDのプラグイン化で目指すところ
warashi
1
240
ふつうの技術スタックでアート作品を作ってみる
akira888
0
310
5つのアンチパターンから学ぶLT設計
narihara
1
140
エラーって何種類あるの?
kajitack
5
330
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
XP, Testing and ninja testing
m_seki
3
220
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
680
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What's in a price? How to price your products and services
michaelherold
246
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A better future with KSS
kneath
239
17k
Making Projects Easy
brettharned
116
6.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
SPA & JWT ͰWeb ΞϓϦέʔγϣϯΛ࡞Δ @subuta 2019/8/28
ࣗݾհ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷͷ͕͖Ͱ ͢ɻ࠷͓ۙࣄͰ Node.js(Koa +
Next.js)Λ͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ͖Ͱ͕͢ɺVue.js Angular.jsᅂΉఔʹ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద ͳͷΛબͿͷ͕ྑͦ͞͏ɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
JWTͱ +40/8FC5PLFO +85 JTBO*OUFSOFUTUBOEBSE GPSDSFBUJOH+40/CBTFEBDDFTTUPLFOTUIBU BTTFSUTPNFOVNCFSPGDMBJNT
JWTͱ +40/8FC5PLFOʢδΣΠιϯɾΣϒɾτʔΫ ϯʣɺ+40/Λϕʔεͱͨ͠ΞΫηετʔΫϯʢӳ ޠ൛ʣͷͨΊͷΦʔϓϯඪ४ 3'$ Ͱ͋Δɻ ུশ+85ɻ
JWTͱ zFZ+IC(DJ0J+*6[*/J*T*O3D$**LQ97$+FZ+TCEO;83+CL'[*KPJ:8 3UB8J-$+Q:92J0K&.K*/[L.[IH[4SB4:4&9#Y-/@P8O'43H $[DN+N.K-JVZV$4QZ)*z CBTFΤϯίʔυ͞Εͨ+40/จࣈྻ҉߸Խ ͞Ε͍ͯΔ༁Ͱͳ͍ͷͰɺCBTFσίʔυ͢Ε தݟ͑Δɻ
JWTͱ +85ɺαʔόʔ্ʹೝূঢ়ଶΛอ࣋͠ͳ͍εςʔ τϨεͳೝূํࣜͰ͋Δɻαʔόʔ"VUIPSJ[BUJPO ϔομʔͰ͞ΕͨτʔΫϯ͕ਖ਼͍͔͚ͩ͠Λݕূ ͠ɺΞΫηεΛڐՄ͢Δɻ+85ʹ͓͍ͯɺೝূʹ ඞཁͳใશͯτʔΫϯʹ֨ೲ͞Ε͓ͯΓɺ σʔλϕʔεͷ͍߹ΘͤΛݮ͢Δ͜ͱ͕Ͱ͖ Δɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
JWTͷར༻(ϖΠϩʔυ) +85ʹҙͷσʔλ ྫVTFS*E ΛؚΊΔ͜ͱ͕Ͱ ͖·͕͢ɺඪ४Խ͞ΕͯΔϖΠϩʔυ ॴఆͷҙຯΛ࣋ͬ ͨLFZ ଘࡏ͠·͢ɻҎԼɺྫɻ w JTTൃߦऀ
*TTVFS w FYQ༗ޮظݶ &YQJSBUJPO5JNF w JBUൃߦ࣌ *TTVFEBU
JWTͷར༻(ϒϥοΫϦετ) +85εςʔτϨεͰ͋Δ͜ͱ͔Βɺ+85୯ମͰ τʔΫϯΛແޮʹ͢Δ͜ͱ͕ग़དྷͳ͍ɻैདྷͷηο γϣϯಉ༷ɺαʔόʔʹঢ়ଶΛอ࣋͢ΕՄೳ͕ͩɺ ͦͷ߹εςʔτϨεͷརࣦΘΕΔɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
JWTͷ࣮ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU
JWTͷ࣮ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU +85͋͘·ͰΞΫηετʔΫϯͳͷͰɺॳճͷϢʔ βೝূ௨ৗ௨Γ ࠓճFNBJMQBTTXPSE ߦ͏ɻ Ϣʔβೝূޙʹ+85Λฦ٫͠ɺҎ߱"1*ʹ͞Εͨ
+85Λ༻͍ͯϢʔβೝূΛߦ͏ɻ 41" 4JOHMF1BHF"QQMJDBUJPO Ͱɺओʹ MPDBM4UPSBHFʹ+85Λ֨ೲͯ͠ར༻͢Δ͜ͱ͕ଟ͍ɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
ͦͷଞ ൿີݤΛ͍ͬͯΕͲ͔͜Β Ͳͷαʔό Ͱೝূ͕ ग़དྷΔͷͰɺαʔόؒͰͷೝূใͷΓͱΓʹ͍ͯ Δɻ ୯Ұͷݤ ൿີݤ Ͱͷೝূͩͱ৺ͳ߹ɺ +8,4
+40/8FC,FZ4FU ͱ͍͏ͷΛͬͯɺݤΛ SPUBUF ೖΕସ͑ ͢ΔΈ͋ΔɻϋοΩϯάͳͲ Ͱݤ͕࿙Εͨ߹ʹڧ͍ɻ +85͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓɺ "VUIʹཔΔํ͕ݱ࣮త ίεύѱ͍ 4/4ϩάΠϯɺ-%"1ೝূͱ͔ʹରԠͯ͠Δɻ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠