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
230
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
550
Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る
subuta
0
350
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
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Kiroで始めるAI-DLC
kaonash
2
620
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
RDoc meets YARD
okuramasafumi
4
170
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Cache Me If You Can
ryunen344
2
3k
1から理解するWeb Push
dora1998
7
1.9k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
470
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
130
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Building an army of robots
kneath
306
46k
A Modern Web Designer's Workflow
chriscoyier
696
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Thoughts on Productivity
jonyablonski
70
4.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
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ೝূͱ͔ʹରԠͯ͠Δɻ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠