SPA & JWT でWeb アプリケーションを作る

Node.jsなAPIサーバとReactを用いたかんたんなSPAを、Fetch API & JWTを使いつつ繋ぎこむサンプルコードを見ながら、JWTの活用方法事例をご紹介します。

1. SPA & JWT ͰWeb
 ΞϓϦέʔγϣϯΛ࡞Δ @subuta 2019/8/28
2. ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa + Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
3. ໨࣍ w +85ͱ͸
   w +85ͷར༻
   w +85ͷ࣮૷ྫ /PEFKT
   
   41"
4. ໨࣍ w +85ͱ͸
   w +85ͷར༻
   w +85ͷ࣮૷ྫ /PEFKT
   
   41"
5. JWTͱ͸ +40/
   8FC
   5PLFO
   +85
   JT
   BO
   *OUFSOFU
   TUBOEBSE
   GPS
   DSFBUJOH
   +40/CBTFE
   BDDFTT
   UPLFOT
   UIBU
   BTTFSU
   TPNF
   OVNCFS
   PG
   DMBJNT
6. JWTͱ͸ +40/
   8FC
   5PLFOʢδΣΠιϯɾ΢ΣϒɾτʔΫ ϯʣ͸ɺ+40/Λϕʔεͱͨ͠ΞΫηετʔΫϯʢӳ ޠ൛ʣͷͨΊͷΦʔϓϯඪ४
   3'$
   
   Ͱ͋Δɻ ུশ͸+85ɻ
7. 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σίʔυ͢Ε ͹த਎͸ݟ͑Δɻ
8. JWTͱ͸ +85͸ɺαʔόʔ্ʹೝূঢ়ଶΛอ࣋͠ͳ͍εςʔ τϨεͳೝূํࣜͰ͋Δɻαʔόʔ͸"VUIPSJ[BUJPO ϔομʔͰ౉͞ΕͨτʔΫϯ͕ਖ਼͍͔͚ͩ͠Λݕূ ͠ɺΞΫηεΛڐՄ͢Δɻ+85ʹ͓͍ͯ͸ɺೝূʹ ඞཁͳ৘ใ͸શͯτʔΫϯ಺ʹ֨ೲ͞Ε͓ͯΓɺ σʔλϕʔε΁ͷ໰͍߹ΘͤΛ࡟ݮ͢Δ͜ͱ͕Ͱ͖ Δɻ
9. ໨࣍ w +85ͱ͸
   w +85ͷར༻
   w +85ͷ࣮૷ྫ /PEFKT
   
   41"
10. JWTͷར༻(ϖΠϩʔυ) +85ʹ͸೚ҙͷσʔλ ྫ
    VTFS*E ΛؚΊΔ͜ͱ͕Ͱ ͖·͕͢ɺඪ४Խ͞ΕͯΔϖΠϩʔυ ॴఆͷҙຯΛ࣋ͬ ͨLFZ ΋ଘࡏ͠·͢ɻҎԼɺྫɻ
    w JTT
    
    ൃߦऀ *TTVFS
    w FYQ
    
    ༗ޮظݶ &YQJSBUJPO
    5JNF
    w JBU
    
    ൃߦ೔࣌ *TTVFE
    BU
11. JWTͷར༻(ϒϥοΫϦετ) +85͸εςʔτϨεͰ͋Δ͜ͱ͔Βɺ+85୯ମͰ͸ τʔΫϯΛແޮʹ͢Δ͜ͱ͕ग़དྷͳ͍ɻैདྷͷηο γϣϯಉ༷ɺαʔόʔʹঢ়ଶΛอ࣋͢Ε͹Մೳ͕ͩɺ ͦͷ৔߹εςʔτϨεͷར఺͸ࣦΘΕΔɻ
12. ໨࣍ w +85ͱ͸
    w +85ͷར༻
    w +85ͷ࣮૷ྫ /PEFKT
    
    41"
13. JWTͷ࣮૷ྫ(Node.js + SPA) σϞ
    IUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU
14. JWTͷ࣮૷ྫ(Node.js + SPA) σϞ
    IUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU
 
 
    +85͸͋͘·ͰΞΫηετʔΫϯͳͷͰɺॳճͷϢʔ βೝূ͸௨ৗ௨Γ ࠓճ͸FNBJMQBTTXPSE ߦ͏ɻ
    
    Ϣʔβೝূޙʹ+85Λฦ٫͠ɺҎ߱͸"1*ʹ౉͞Εͨ +85Λ༻͍ͯϢʔβೝূΛߦ͏ɻ
    
    41" 4JOHMF
    1BHF
    "QQMJDBUJPO Ͱ͸ɺओʹ MPDBM4UPSBHFʹ+85Λ֨ೲͯ͠ར༻͢Δ͜ͱ͕ଟ͍ɻ
15. ໨࣍ w +85ͱ͸
    w +85ͷར༻
    w +85ͷ࣮૷ྫ /PEFKT
    
    41"
16. ͦͷଞ 
    ൿີݤΛ஌͍ͬͯΕ͹Ͳ͔͜Β Ͳͷαʔό Ͱ΋ೝূ͕ ग़དྷΔͷͰɺαʔόؒͰͷೝূ৘ใͷ΍ΓͱΓʹ͸޲͍ͯ Δɻ
    
    ୯Ұͷݤ ൿີݤ Ͱͷೝূͩͱ৺഑ͳ৔߹͸ɺ +8,4 +40/
    8FC
    ,FZ
    4FU ͱ͍͏ͷΛ࢖ͬͯɺݤΛ SPUBUF ೖΕସ͑ ͢Δ࢓૊Έ΋͋Δɻ
    
    ϋοΩϯάͳͲ Ͱݤ͕࿙Εͨ৔߹ʹڧ͍ɻ
    
    +85࢖͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓ͸ɺ "VUIʹཔΔํ͕ݱ࣮త ίεύ͸΍΍ѱ͍
    
    
    
    4/4ϩάΠϯ΍ɺ-%"1ೝূͱ͔ʹ΋ରԠͯ͠Δɻ
17. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠