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

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

Takayuki
September 07, 2021

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

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

Takayuki

September 07, 2021
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

  1. middlewareを使ってݖ限チェックし
    たらスパゲティになってしまった話
    鈴木孝之

    View full-size slide

  2. "HFOEB
    ࣗݾ঺հ
    ࣮ݱ͔ͨͬͨ͠࢓༷
    ࣮ࡍʹ࣮૷ͨ͠ߏ੒
    ࣦഊΛ௨ͯ͠ͷվળࡦ

    View full-size slide

  3. ࣗݾ঺հɾձࣾ঺հ

    View full-size slide

  4. Copyright Re:Build.inc All Rights Reserved.
    ࣗݾ঺հ
    1
    ◆໊લ
    ླ໦ ޹೭(Suzuki Takayuki)
    ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ
    ◆ࣗݾ঺հ
    ɾ1990೥ੜ·Εɻ
    ɾԭೄͰىۀͯ͠໿3೥ɻ
    ɾPHPΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕ɺ
    ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕
    ◆झຯ
    ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ
    BDD(Ϗʔνۦಈ։ൃ)

    View full-size slide

  5. Copyright Re:Build.inc All Rights Reserved.
    ࣗݾ঺հ
    1

    View full-size slide

  6. Copyright Re:Build.inc All Rights Reserved.
    ձࣾ঺հ
    1
    ◆ձ໊ࣾ
    גࣜձࣾRe:Build
    ◆ॅॴ
    ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ
    ◆ࣄۀ಺༰
    ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
    ɾडୗ։ൃ
    ◆ࣾһ
    10໊
    ◆ΤϯδχΞͷಇ͖ํ
    ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ

    View full-size slide

  7. Copyright Re:Build.inc All Rights Reserved.
    7
    ɾαʔϏε໊
    Tadoru

    https://tadoru.work/


    ɾγεςϜ֓ཁ
    ΤϯδχΞಛԽܕͷ
    ϦϑΝϥϧ
    Ϋϥ΢υιʔγϯά
    1 ձࣾ঺հ

    View full-size slide

  8. Copyright Re:Build.inc All Rights Reserved.
    8
    ɾαʔϏε໊
    Re:Build Boot Camp

    https://rebuild-bootcamp.jp/


    ɾ֓ཁ
    ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨
    ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε
    Ϋʔϧ
    ɾ࢖͏ٕज़
    LaravelɺVue.jsͳͲ
    1 ձࣾ঺հ

    View full-size slide

  9. Copyright Re:Build.inc All Rights Reserved.
    9
    https://macloud.jp/interviews/25
    1 ձࣾ঺հ
    M&AΫϥ΢υΛ࢖ͬͯɺ
    ࢿۚௐୡͤͯ͞௖͖·ͨ͠ʂʂ

    View full-size slide

  10. ࣮ݱ͔ͨͬͨ͠࢓༷

    View full-size slide

  11. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ

    ར༻ݖݶ
    ɾ্ڃձһݖݶ
    ɾதڃձһݖݶ
    ɾҰൠϝϯόʔݖݶ

    View full-size slide

  12. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ

    ໾৬Φϓγϣϯݖݶ
    ɾ໾һݖݶ
    ɾ՝௕ݖݶ
    ɾ෦௕ݖݶ
    ར༻ݖݶ
    ɾ্ڃձһݖݶ
    ɾதڃձһݖݶ
    ɾҰൠϝϯόʔݖݶ

    View full-size slide

  13. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ

    ։ൃޙ൒Ͱ͍͖ͳΓݖݶͷ࢓༷͕௥Ճ
    ͞Εͯɺෳࡶʹͳ͍ͬͯͬͨ…ʂ

    View full-size slide

  14. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ

    View full-size slide

  15. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ

    ࡉ͔͗ͯ͢༁Θ͔ΒΜʂʂ

    View full-size slide

  16. ݖݶ੍ޚͷΠϝʔδ
    ݖݶ͝ͱͰϝχϡʔ
    Λ੍ޚ

    View full-size slide

  17. ࣮ࡍʹ࣮૷ͨ͠ߏ੒

    View full-size slide

  18. ϑϩϯτΤϯυ
    ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ
    APIϦΫΤετ
    αʔόαΠυ
    JSON͕ฦ٫͞ΕΔ
    Component
    /login
    Routing
    Middleware
    permission {
    ɾɾɾ
    }
    JSONͷྫ
    HTML
    CSS
    JS
    ɾϩάΠϯ࣌ʹݖݶΛνΣο
    Ϋ͢Δɻ
    ɾݖݶʹԠͯ͡ϦμΠϨΫτ
    localStrage
    ݖݶ৘ใΛอ࣋
    ݖݶΛऔಘ
    αʔόαΠυଆͰ
    ϩάΠϯॲཧΛ࣮ߦ
    ݖݶ৘ใΛऔಘɻ
    ϒϥ΢β͔ΒΞΫηε͠ɺ
    ϢʔβIDͱύεϫʔυΛೖྗ
    ݖݶΛઃఆ
    Database
    request.ts
    response.ts
    Types
    Libs/api/index.ts

    View full-size slide

  19. σΟϨΫτϦ
    ϛυϧ΢ΣΞ

    View full-size slide

  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܈Λఆٛ

    View full-size slide

  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');
    }
    }
    ݖݶ੍ޚ৘ใ
    Λࢀর

    View full-size slide

  22. ݖݶ੍ޚͷΠϝʔδ
    ϝχϡʔͷComponentͷ
    ϑΝΠϧ
    ͲͷݖݶΛ͍࣋ͬͯΔ͔Ͱ
    ϝχϡʔͷදࣔɾඇදࣔΛ
    ੍ޚ͢Δɻ
    ݖݶʹԠͯ͡ifจͰग़͠Θ͚

    View full-size slide

  23. ໰୊఺
    ɾ௥ՃͰ৽͍͠ݖݶͷ֓೦͕ग़͖ͯͨࡍʹ͞Βʹifจ஍ࠈʹͳΔ
    ɾ৽͍͠ݖݶ͕૿͑ͨ࣌ʹϝχϡʔͷදࣔɾඇදࣔͷ੍ޚ͕೉
    ͘͠ͳΔɻ

    View full-size slide

  24. ࣦഊΛ௨ͯ͠ͷվળࡦ

    View full-size slide

  25. վળࡦ
    ɾόοΫΤϯυଆͰࡉ͔͍ݖݶͷ੍ޚϩδοΫΛॻ͘
    ɾϏοτԋࢉͰෳ਺ͷݖݶΛҰҙʹදݱ͢Δ
    ɾϝχϡʔͷදࣔɾඇදࣔ΋όοΫΤϯυଆͰ൑ผͯ͠ɺJSON
    Ͱฦ٫͠ɺϑϩϯτଆͰ͸ͦͷJSONΛݩʹϝχϡʔͷग़͠෼͚
    Λߦ͏ɻ

    View full-size slide

  26. ݖݶͷमਖ਼Πϝʔδ
    ໾৬Φϓγϣϯݖݶ
    ɾ໾һݖݶ
    ɾ՝௕ݖݶ
    ɾ෦௕ݖݶ
    ར༻ݖݶ
    ɾ্ڃձһݖݶ
    ɾதڃձһݖݶ
    ɾҰൠϝϯόʔݖݶ
    ݖݶͷ૊Έ߹ΘͤΛ
    ϏοτԋࢉͰදݱ͢
    Δ
    000001
    000010
    000100

    View full-size slide

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

    View full-size slide