O'tgan loyihaning frontend kodining umumiy qismini refaktoring qilish jarayonida, huquqlarni boshqarish tuzilmasini ham o'zgartirdik. Huquqlarni boshqarish router sozlamalari, menyu renderlash mantiqi, alohida ekran komponentlari kabi xizmatning umumiy qismida foydalaniladigan kesishgan qiziqishdir. Refaktoring orqali bu mantıqni yanada e'lon ijobiy va mos ravishda boshqarish imkonini beradigan tuzilishga rivojlantirdik. Yaxshilangan qismlar katta uchta.
-
Sahifa kirish mantig'ini integratsiya qilish:Routerni va menyuni chizish kodida ruxsatlarni har birini boshqaradigan edik, buni bir faylda boshqariladigan qilib o'zgartirdik.
-
Ekran ichidagi kodning bir xil holati:Har bir ekran uchun ruxsatlarni tekshirish usuli boshqacha, buni bitta maxsus hook sifatida birlashtirib boshqardik.
-
Ishlash samaradorligini optimallashtirish: Rendering har birida ruxsatlarni hisoblash jarayonini useMemo bilan yaxshilab, ruxsat ma'lumotlari o'zgarganda faqat qayta hisoblashni optimallashtirdim.
Router va menyu ruxsatlari bilan bog'liq asoslarni birlashtirish: PAGE_PERMISSIONS
Mavjud tuzilishda ma'lum sahifaga kirish huquqini belgilash router xavfsizlik garovi va yon panel menyusini render qilish mantiqiga parchalanib taqdim etilgan. Buning natijasida rejalashtirilgan huquq o‘zgarishi yuzaga kelganda tegishli fayllarni topib tuzatish zarurati paydo bo‘ladi va biron joy qolib ketganda menyu ko‘rinadigan, lekin kirish to‘xtatiladigan yoki aksincha, kirish mumkin, lekin menyu ko‘rsatilmaydigan izchil muammolar tez-tez yuzaga kelgan.
Buni hal qilish uchun loyiha ichidagi barcha yo‘llarni belgilovchi PATHS doimiyligini kalit (key) sifatida ishlatib, har bir yo‘l uchun ruxsat berilgan rollarni massiv ko‘rinishida boshqaruvchi PAGE_PERMISSIONS deb nomlangan yagona huquq xaritasini yaratdik.
|
export const PAGE_PERMISSIONS: Record = { [PATHS.NOTICE_LIST]: ['USER', 'MANAGER', 'ADMIN'], [PATHS.NOTICE_DETAIL]: ['BOSHQQ', 'ADMIN'], [PATHS.ORG_MANAGEMENT]: ['ADMIN'], ; |
Mana shunday ruxsat xaritasini tuzsangiz, router guard yoki menyu komponentida endi alohida mantiq yozish kerak emas, faqat imkon berilgan rollarni kuzatish uchun joriy yo'lni berish kifoya.
|
<RoleCheckLayout allowedRoles={PAGE_PERMISSIONS[PATHS.NOTICE_LIST]}> <NoticeListPage /> </RoleCheckLayout> |
Bu usul ruxsatlarni sozlash uchunBiznes mantiqidan to'liq ajratilganva e'lon qilingan tarzda boshqarishga imkon beradi. Kelajakda yangi ro'yxat (Role) qo'shilsa yoki ma'lum sahifaning xavfsizlik siyosati kuchaytirilsa, PAGE_PERMISSIONS obyekti faqat bitta o'zgarish bilan butun xizmatga darhol yakkalanadi.
Ichki mantiqiyani birlashtirish: useAuthCheck
Sahifa darajasidagi kirish nazorati bilan bir qatorda, ekran ichida ma'lum tugmachalarni ko'rsatish yoki shaklni faollashtirmaslik kabi nozik UI nazorat mantiqiy ham muhim vazifa edi. Ilgari har bir komponentda to'g'ridan-to'g'ri foydalanuvchi holatini olib, includes operatsiyasini bajaradigan yoki murakkab shartlardan ko'p qayta yozgan edik.
bunday parchalangan mantiqni useAuthCheck deb nomlangan bitta maxsushookMen buni abstrakt qildim. Ayniqsa, bu xok nafaqat rolnini tekshirishga, balki global holatda boshqariladigan roleNames va ma'lum bir tenant yoki tashkilotga bog'liq bo'lgan tenantRoleNames'ni birlashtirib, aniqlash logikasini o'z ichiga oladi, bu esa murakkab huquq tuzilmasiga ega bo'lgan loyihalarda ham dasturchilar uchun intuitiv foydalanish imkonini yaratadi.
|
export const useAuthCheck = () => { const { roleNames = [], tenantRoleNames = [] } = useAuth(); const hasRole = useCallback( (role: RoleName) => [...roleNames, ...tenantRoleNames].rolni o'z ichiga olmaydi, [rolNomlari, ijarachiRolNomlari] ; const { isUser, isManager, isAdmin } = useMemo(() => ({ isUser: rolega ega (RoleName.USER), isManager: rolega ega (RoleName.MANAGER) || rolega ega (RoleName.ADMIN), isAdmin: hasRole(RoleName.ADMIN), }), [hasRole]); quyidagilarni qaytarish { rolga ega, foydalanuvchi, menejer, administrator }; }; |
Amal ko'rinishini amalga oshirish bosqichida quyidagi juda sodda kod bilan javob berish mumkin.
|
const { isAdmin, isManager } = useAuthCheck(); return ( <> {isManager && tahrirlash} {isAdmin && o'chirish} ); |
Bu hukun joriy etilishi orqali olingan eng katta afzallik O'zgartirishlarga moslashuvchan tuzilmaAgar 'menedjer' ta'rifi 'kattaroq foydalanuvchi'ni o'z ichiga oladigan tarzda o'zgartirilsa, ko'plab ekranlar kodini tahrirlash o'rniga useAuthCheck ichidagi isManager hisoblash logikasini o'zgartirish kifoya. Bu inson xatolarini keskin kamaytiradi va kodning o'qilishi osonlashadi.
Ishlashni optimallashtirish va barqarorlik: useMemo va useCallbackdan foydalanish
Ruxsatlarni tasdiqlash mantiqi komponent har bir qayta chizilganda takroriy ravishda bajariladi. Ayniqsa, foydalanuvchi rollari ko'p bo'lsa yoki [...roleNames, ...tenantRoleNames] kabi massivlarni birlashtiruvchi va takrorlaydigan amal kiritilsa, keraksiz operatsion xarajatlar paydo bo'lishi mumkin. Bundan tashqari, har safar yangi funksiya yaratilsa, bu props sifatida qabul qiladigan pastki komponentlarning keraksiz qayta chizilishiga ham olib kelishi mumkin.
Refaktoring jarayonida bunday keraksiz operatsion ortiqcha xarajatlarni minimallashtirish uchun Reactning optimizatsiya API'sidan faol foydalanildi.
-
Funktsiyani qayta yaratishdan saqlanishhasRole funksiyasini useCallback bilan o'rab, roleNames kabi bog'lanish massivlari o'zgarmasa, bir xil havolani saqlab turishga imkon berdi. Bu esa ushbu funksiyani ishlatadigan pastki komponentlarning optimizatsiyasini (React.memo va boshqalar) amalga oshirishga imkon beradi.
-
tugatish holatining keshlenishiisAdmin, isManager kabi rollarni aniqlash natijalari to'liq funktsional xususiyatga ega bo'lib, useMemo orqali keshlandi. Bu murakkab ruxsat kombinatsiyalarini hisoblashni har bir renderlashda takrorlanishini oldini oladi va hisoblash natijalari bir xil bo'lsa, avvalgi qiymatlardan foydalanish imkonini beradi.
Bunday optimizatsiya nafaqat bajarish tezligini oshirish, balki ma'lumotlarning izchilligini ta'minlash nuqtai nazaridan ham samarali hisoblanadi. Agar renderlash paytida ruxsat ma'lumotlari vaqtincha notog'ri boʻlsa, memoized qiymatlar orqali barqaror UI saqlanib qoladi.
Ushbu qayta ishlashning asosiy jihati huquqni boshqarishni yagona qilishdir. Parchalangan mantiqni PAGE_PERMISSIONS, useAuthCheck deb nomlangan aniq yagona interfeysga birlashtirish orqali quyidagi amaldagi foydalarni oldik.
-
Texnik xizmat ko'rsatish samaradorligini oshirishRuxsat siyosatini o'zgartirganda tuzatish doirasi bitta fayl bilan cheklanganligi sababli javob berish tezligi oshdi.
-
Kodning deklarativligi yaxshilandi"Qanday ruxsatlarni tekshirish kerak" emas, balki "Kim ushbu funksiyaga kirishi mumkin" ga e'tibor berishi kerak bo'lgan kodga aylandi.
-
Tizim xavfsizligini ta'minlashMarkazlashtirilgan boshqarish orqali huquqni yo'qotish yoki mos kelmaslik natijasida kelib chiqadigan xavfsizlik zaifliklarini to'liq yo'q qildik.
Parchalangan mantiqni bir joyga to'plamoq oddiy ko'ringan ish edi, ammo bu orqali o'qilishi va saqlash qulayligini ta'minlaydigan ikkita quyonni qo'lga kiritish mumkin bo'ldi va kelgusida xizmat yanada murakkablashsa ham barqaror ravishda kengayishi uchun kuchli asos yaratildi.
Lynn