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. ɾϑϩϯτଆͰϩάΠϯͷνΣοΫͱϝχϡʔͷ ग़͠༁Λ΍ΔͱεύήςΟʹͳΔͷͰɺ ෳࡶͳνΣοΫ͸όοΫΤϯυଆͰ΍Ζ͏ʂ ·ͱΊ