Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話
Takayuki
September 07, 2021
Programming
1
310
Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話
Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話
Takayuki
September 07, 2021
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Notionで簡易サイトを作成して、ニーズ調査を行った話
bumptakayuki
2
870
Re:Buildでのローコード開発の取り組み
bumptakayuki
0
310
誰でも簡単に始められるBDD(ビーチ駆動開発)のススメ
bumptakayuki
0
790
本当にあった怖いPHPコード7選
bumptakayuki
1
2.4k
Laravel Activity Logを使って簡単に変更履歴機能を実装しよう
bumptakayuki
0
330
vue.jsで漢字のふりがな自動変換を実装した話
bumptakayuki
1
720
LaravelのFat Controllerをどうリファクタしていくか
bumptakayuki
0
520
LaravelとNuxt.jsで保守性を高める構成を考えてみた
bumptakayuki
1
950
沖縄のスタートアップ企業が痛みを伴いながら、2つ目の自社プロダクト開発への挑戦
bumptakayuki
0
440
Other Decks in Programming
See All in Programming
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
620
Prácticas de Seguridad en Kubernetes
pablokbs
0
130
OSC大阪 パスワード認証は人類には早すぎる ~ IDaaSを使ったソーシャルログインのすすめ ~
authyasan
7
1.5k
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
120
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
140
Qiita Night PHP 2023
fuwasegu
0
11k
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
260
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
Writing Greener Java Applications
hollycummins
0
350
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
390
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
250
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
66
4.3k
Documentation Writing (for coders)
carmenintech
51
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
We Have a Design System, Now What?
morganepeng
37
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Optimizing for Happiness
mojombo
365
64k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
580
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Transcript
middlewareを使ってݖ限チェックし たらスパゲティになってしまった話 鈴木孝之
"HFOEB ࣗݾհ ࣮ݱ͔༷ͨͬͨ͠ ࣮ࡍʹ࣮ͨ͠ߏ ࣦഊΛ௨ͯ͠ͷվળࡦ
ࣗݾհɾձࣾհ
Copyright Re:Build.inc All Rights Reserved. ࣗݾհ 1 ◆໊લ ླ ೭(Suzuki
Takayuki) ※ಉಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾհ ɾ1990ੜ·Εɻ ɾԭೄͰىۀͯ͠3ɻ ɾPHPΧϯϑΝϨϯεԭೄ࣮ߦҕһɺ ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ࣮ߦҕһ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ BDD(Ϗʔνۦಈ։ൃ)
Copyright Re:Build.inc All Rights Reserved. ࣗݾհ 1
Copyright Re:Build.inc All Rights Reserved. ձࣾհ 1 ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ
ԭೄݝಹࢢٱໜ2-2-2 λΠϜεϏϧ ◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 10໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
Copyright Re:Build.inc All Rights Reserved. 7 ɾαʔϏε໊ Tadoru https://tadoru.work/
ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥυιʔγϯά 1 ձࣾհ
Copyright Re:Build.inc All Rights Reserved. 8 ɾαʔϏε໊ Re:Build Boot Camp
https://rebuild-bootcamp.jp/ ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮ϨϕϧʯΛ ࢦ͢ํ͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾհ
Copyright Re:Build.inc All Rights Reserved. 9 https://macloud.jp/interviews/25 1 ձࣾհ M&AΫϥυΛͬͯɺ
ࢿۚௐୡ͖ͤͯ͞·ͨ͠ʂʂ
࣮ݱ͔༷ͨͬͨ͠
࣮ݱ͔༷ͨͬͨ͠ ྫ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ
࣮ݱ͔༷ͨͬͨ͠ ྫ ৬Φϓγϣϯݖݶ ɾһݖݶ ɾ՝ݖݶ ɾ෦ݖݶ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ
࣮ݱ͔༷ͨͬͨ͠ ྫ ։ൃޙͰ͍͖ͳΓݖݶͷ༷͕Ճ ͞Εͯɺෳࡶʹͳ͍ͬͯͬͨ…ʂ
࣮ݱ͔༷ͨͬͨ͠ ྫ
࣮ݱ͔༷ͨͬͨ͠ ྫ ࡉ͔͗ͯ͢༁Θ͔ΒΜʂʂ
ݖݶ੍ޚͷΠϝʔδ ݖݶ͝ͱͰϝχϡʔ Λ੍ޚ
࣮ࡍʹ࣮ͨ͠ߏ
ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ APIϦΫΤετ αʔόαΠυ JSON͕ฦ٫͞ΕΔ Component /login Routing Middleware permission
{ ɾɾɾ } JSONͷྫ HTML CSS JS ɾϩάΠϯ࣌ʹݖݶΛνΣο Ϋ͢Δɻ ɾݖݶʹԠͯ͡ϦμΠϨΫτ localStrage ݖݶใΛอ࣋ ݖݶΛऔಘ αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ ݖݶใΛऔಘɻ ϒϥβ͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ ݖݶΛઃఆ Database request.ts response.ts Types Libs/api/index.ts
σΟϨΫτϦ ϛυϧΣΞ
࣮Πϝʔδ 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܈Λఆٛ
࣮Πϝʔδ ݖݶʹԠͨ͡ӾཡՄೳͳ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'); } } ݖݶ੍ޚใ Λࢀর
ݖݶ੍ޚͷΠϝʔδ ϝχϡʔͷComponentͷ ϑΝΠϧ ͲͷݖݶΛ͍࣋ͬͯΔ͔Ͱ ϝχϡʔͷදࣔɾඇදࣔΛ ੍ޚ͢Δɻ ݖݶʹԠͯ͡ifจͰग़͠Θ͚
ɾՃͰ৽͍͠ݖݶͷ֓೦͕ग़͖ͯͨࡍʹ͞ΒʹifจࠈʹͳΔ ɾ৽͍͠ݖݶ͕૿͑ͨ࣌ʹϝχϡʔͷදࣔɾඇදࣔͷ੍ޚ͕ ͘͠ͳΔɻ
ࣦഊΛ௨ͯ͠ͷվળࡦ
վળࡦ ɾόοΫΤϯυଆͰࡉ͔͍ݖݶͷ੍ޚϩδοΫΛॻ͘ ɾϏοτԋࢉͰෳͷݖݶΛҰҙʹදݱ͢Δ ɾϝχϡʔͷදࣔɾඇදࣔόοΫΤϯυଆͰผͯ͠ɺJSON Ͱฦ٫͠ɺϑϩϯτଆͰͦͷJSONΛݩʹϝχϡʔͷग़͚͠ Λߦ͏ɻ
ݖݶͷमਖ਼Πϝʔδ ৬Φϓγϣϯݖݶ ɾһݖݶ ɾ՝ݖݶ ɾ෦ݖݶ ར༻ݖݶ ɾ্ڃձһݖݶ ɾதڃձһݖݶ ɾҰൠϝϯόʔݖݶ ݖݶͷΈ߹ΘͤΛ
ϏοτԋࢉͰදݱ͢ Δ 000001 000010 000100
ɾϑϩϯτଆͰϩάΠϯͷνΣοΫͱϝχϡʔͷ ग़͠༁ΛΔͱεύήςΟʹͳΔͷͰɺ ෳࡶͳνΣοΫόοΫΤϯυଆͰΖ͏ʂ ·ͱΊ