[PR #32302] refactor(web): centralize role-based route guards and fix anti-patterns #33659

Closed
opened 2026-02-21 20:53:40 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/32302

State: closed
Merged: Yes


Summary

  • Centralized dataset_operator route guard: Created RoleRouteGuard component at (commonLayout)/layout.tsx level, replacing 5 identical useEffect + router.replace guards scattered across leaf components
  • Replaced useEffect guards with synchronous render checks: Guards now check role during render and return null before children mount, preventing unauthorized content flash
  • Fixed derived state anti-pattern: explore/index.tsx derived hasEditPermission directly during render instead of useState + useEffect (rerender-derived-state-no-effect)
  • Replaced @remixicon/react imports with CSS icon classes in apps/list.tsx, reducing JS bundle size
  • Removed dead code: unused validTabs Set and redundant guard in datasets/list/index.tsx (already covered by datasets/layout.tsx)

Test plan

  • Verify dataset_operator role is redirected to /datasets when accessing /apps, /tools, /explore
  • Verify normal role is redirected to /apps when accessing /datasets
  • Verify editor/admin/owner roles can access all routes normally
  • Verify no flash of unauthorized content before redirect
  • Verify icons render correctly in apps list tab slider and DSL drop zone
**Original Pull Request:** https://github.com/langgenius/dify/pull/32302 **State:** closed **Merged:** Yes --- ## Summary - **Centralized dataset_operator route guard**: Created `RoleRouteGuard` component at `(commonLayout)/layout.tsx` level, replacing 5 identical `useEffect` + `router.replace` guards scattered across leaf components - **Replaced useEffect guards with synchronous render checks**: Guards now check role during render and return `null` before children mount, preventing unauthorized content flash - **Fixed derived state anti-pattern**: `explore/index.tsx` derived `hasEditPermission` directly during render instead of `useState` + `useEffect` (`rerender-derived-state-no-effect`) - **Replaced `@remixicon/react` imports with CSS icon classes** in `apps/list.tsx`, reducing JS bundle size - **Removed dead code**: unused `validTabs` Set and redundant guard in `datasets/list/index.tsx` (already covered by `datasets/layout.tsx`) ## Test plan - [ ] Verify dataset_operator role is redirected to `/datasets` when accessing `/apps`, `/tools`, `/explore` - [ ] Verify normal role is redirected to `/apps` when accessing `/datasets` - [ ] Verify editor/admin/owner roles can access all routes normally - [ ] Verify no flash of unauthorized content before redirect - [ ] Verify icons render correctly in apps list tab slider and DSL drop zone
yindo added the pull-request label 2026-02-21 20:53:40 -05:00
yindo closed this issue 2026-02-21 20:53:41 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#33659