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. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1 ◆໊લ ླ໦ ޹೭(Suzuki

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

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


    ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥ΢υιʔγϯά 1 ձࣾ঺հ
  4. Copyright Re:Build.inc All Rights Reserved. 8 ɾαʔϏε໊ Re:Build Boot Camp


    https://rebuild-bootcamp.jp/
 
 ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨ ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ࢖͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾ঺հ
  5. ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ APIϦΫΤετ αʔόαΠυ JSON͕ฦ٫͞ΕΔ Component /login Routing Middleware permission

    { ɾɾɾ } JSONͷྫ HTML CSS JS ɾϩάΠϯ࣌ʹݖݶΛνΣο Ϋ͢Δɻ ɾݖݶʹԠͯ͡ϦμΠϨΫτ localStrage ݖݶ৘ใΛอ࣋ ݖݶΛऔಘ αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ ݖݶ৘ใΛऔಘɻ ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ ݖݶΛઃఆ Database request.ts response.ts Types Libs/api/index.ts
  6. ࣮૷Πϝʔδ 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܈Λఆٛ
  7. ࣮૷Πϝʔδ ݖݶʹԠͨ͡ӾཡՄೳͳ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'); } } ݖݶ੍ޚ৘ใ Λࢀর