Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Copyright Re:Build.inc All Rights Reserved. 8 ɾαʔϏε໊ Re:Build Boot Camp
 https://rebuild-bootcamp.jp/
 
 ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨ ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ࢖͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾ঺հ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

࣮ݱ͔ͨͬͨ͠࢓༷

Slide 11

Slide 11 text

࣮ݱ͔ͨͬͨ͠࢓༷ ྫ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ

Slide 12

Slide 12 text

࣮ݱ͔ͨͬͨ͠࢓༷ ྫ ໾৬Φϓγϣϯݖݶ ɾ໾һݖݶ ɾ՝௕ݖݶ ɾ෦௕ݖݶ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

࣮ݱ͔ͨͬͨ͠࢓༷ ྫ

Slide 15

Slide 15 text

࣮ݱ͔ͨͬͨ͠࢓༷ ྫ ࡉ͔͗ͯ͢༁Θ͔ΒΜʂʂ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

࣮ࡍʹ࣮૷ͨ͠ߏ੒

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

࣮૷Πϝʔδ 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܈Λఆٛ

Slide 21

Slide 21 text

࣮૷Πϝʔδ ݖݶʹԠͨ͡ӾཡՄೳͳ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'); } } ݖݶ੍ޚ৘ใ Λࢀর

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ࣦഊΛ௨ͯ͠ͷվળࡦ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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