Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
September 07, 2021

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

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

September 07, 2021
Tweet

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