Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話

Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話

Transcript

1. middlewareを使ってݖ限チェックし たらスパゲティになってしまった話 鈴木孝之
2. "HFOEB ࣗݾ঺հ
   ࣮ݱ͔ͨͬͨ͠࢓༷
   ࣮ࡍʹ࣮૷ͨ͠ߏ੒
   ࣦഊΛ௨ͯ͠ͷվળࡦ
3. ࣗݾ঺հɾձࣾ঺հ
4. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1 ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ੜ·Εɻ ɾԭೄͰىۀͯ͠໿3೥ɻ ɾPHPΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕ɺ ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ BDD(Ϗʔνۦಈ։ൃ)
5. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1
6. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ 1 ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 10໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
7. Copyright Re:Build.inc All Rights Reserved. 7 ɾαʔϏε໊ Tadoru
 https://tadoru.work/
 
 ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥ΢υιʔγϯά 1 ձࣾ঺հ
8. Copyright Re:Build.inc All Rights Reserved. 8 ɾαʔϏε໊ Re:Build Boot Camp
 https://rebuild-bootcamp.jp/
 
 ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨ ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ࢖͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾ঺հ
9. Copyright Re:Build.inc All Rights Reserved. 9 https://macloud.jp/interviews/25 1 ձࣾ঺հ M&AΫϥ΢υΛ࢖ͬͯɺ ࢿۚௐୡͤͯ͞௖͖·ͨ͠ʂʂ
10. ࣮ݱ͔ͨͬͨ͠࢓༷
11. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ
12. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ ໾৬Φϓγϣϯݖݶ ɾ໾һݖݶ ɾ՝௕ݖݶ ɾ෦௕ݖݶ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ
13. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ ։ൃޙ൒Ͱ͍͖ͳΓݖݶͷ࢓༷͕௥Ճ ͞Εͯɺෳࡶʹͳ͍ͬͯͬͨ…ʂ
14. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ
15. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ ࡉ͔͗ͯ͢༁Θ͔ΒΜʂʂ
16. ݖݶ੍ޚͷΠϝʔδ ݖݶ͝ͱͰϝχϡʔ Λ੍ޚ
17. ࣮ࡍʹ࣮૷ͨ͠ߏ੒
18. ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ APIϦΫΤετ αʔόαΠυ JSON͕ฦ٫͞ΕΔ Component /login Routing Middleware permission { ɾɾɾ } JSONͷྫ HTML CSS JS ɾϩάΠϯ࣌ʹݖݶΛνΣο Ϋ͢Δɻ ɾݖݶʹԠͯ͡ϦμΠϨΫτ localStrage ݖݶ৘ใΛอ࣋ ݖݶΛऔಘ αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ ݖݶ৘ใΛऔಘɻ ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ ݖݶΛઃఆ Database request.ts response.ts Types Libs/api/index.ts
19. σΟϨΫτϦ ϛυϧ΢ΣΞ
20. ࣮૷Πϝʔδ auth.js const permissions = { 'employee': { general: [ '/admin/organization', '/admin/account' ] }, 'admin': { general: [ '/admin/organization', '/admin/account', '/admin/analysis' ] } } // URL͕اۀ؅ཧը໘ͷ৔߹ if (fullPath.startsWith('/admin')) { if (permissions === 'admin') { // μογϡϘʔυ΁ redirect('/admin'); } // URL͕ैۀһը໘ͷ৔߹ } else if (fullPath.startsWith('/user')) { if (permissions === 'admin') { // μογϡϘʔυ΁ redirect('/user'); } } ݖݶʹԠͨ͡ӾཡՄೳͳURL ఆ਺Λ·ͱΊͨϑΝΠϧ ݖݶ͝ͱʹӾཡՄೳ ͳURL܈Λఆٛ
21. ࣮૷Πϝʔδ ݖݶʹԠͨ͡ӾཡՄೳͳURL ఆ਺Λ·ͱΊͨϑΝΠϧ auth.js const permissions = { 'employee': { general: [ '/admin/organization', '/admin/account' ] }, 'admin': { general: [ '/admin/organization', '/admin/account', '/admin/analysis' ] } } // URL͕اۀ؅ཧը໘ͷ৔߹ if (fullPath.startsWith('/admin')) { if (permissions === 'admin') { // μογϡϘʔυ΁ redirect('/admin'); } // URL͕ैۀһը໘ͷ৔߹ } else if (fullPath.startsWith('/user')) { if (permissions === 'admin') { // μογϡϘʔυ΁ redirect('/user'); } } ݖݶ੍ޚ৘ใ Λࢀর
22. ݖݶ੍ޚͷΠϝʔδ ϝχϡʔͷComponentͷ ϑΝΠϧ ͲͷݖݶΛ͍࣋ͬͯΔ͔Ͱ ϝχϡʔͷදࣔɾඇදࣔΛ ੍ޚ͢Δɻ ݖݶʹԠͯ͡ifจͰग़͠Θ͚
23. ໰୊఺ ɾ௥ՃͰ৽͍͠ݖݶͷ֓೦͕ग़͖ͯͨࡍʹ͞Βʹifจ஍ࠈʹͳΔ ɾ৽͍͠ݖݶ͕૿͑ͨ࣌ʹϝχϡʔͷදࣔɾඇදࣔͷ੍ޚ͕೉ ͘͠ͳΔɻ
24. ࣦഊΛ௨ͯ͠ͷվળࡦ
25. վળࡦ ɾόοΫΤϯυଆͰࡉ͔͍ݖݶͷ੍ޚϩδοΫΛॻ͘ ɾϏοτԋࢉͰෳ਺ͷݖݶΛҰҙʹදݱ͢Δ ɾϝχϡʔͷදࣔɾඇදࣔ΋όοΫΤϯυଆͰ൑ผͯ͠ɺJSON Ͱฦ٫͠ɺϑϩϯτଆͰ͸ͦͷJSONΛݩʹϝχϡʔͷग़͠෼͚ Λߦ͏ɻ
26. ݖݶͷमਖ਼Πϝʔδ ໾৬Φϓγϣϯݖݶ ɾ໾һݖݶ ɾ՝௕ݖݶ ɾ෦௕ݖݶ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ ݖݶͷ૊Έ߹ΘͤΛ ϏοτԋࢉͰදݱ͢ Δ 000001 000010 000100
27. ɾϑϩϯτଆͰϩάΠϯͷνΣοΫͱϝχϡʔͷ ग़͠༁Λ΍ΔͱεύήςΟʹͳΔͷͰɺ ෳࡶͳνΣοΫ͸όοΫΤϯυଆͰ΍Ζ͏ʂ ·ͱΊ