Django + React 電商專案實戰 [7] - 後台實作 - 後台管理員頁面權限與路由規劃

# 為何需要額外創建一個元件檢查權限？

如果多個頁面都需要檢查是否為管理員，最好在路由層面進行控制，避免每個頁面都重複寫檢查邏輯，導致程式碼難以維護。

# 創建高階元件（HOC）檢查權限

先多創建一個高階元件 AdminRoute.js，這個元件會檢查是否為管理員，如果是管理員就顯示該頁面，否則導向首頁。

// ../components/AdminRoute.js
const AdminRoute = ({ children }) => {
 const navigate = useNavigate();
 const { userInfo } = useSelector((state) => state.userLogin);

 useEffect(() => {
  if (!userInfo || !userInfo.isAdmin) {
   navigate("/");
  }
 }, [navigate, userInfo]);

 return children; // 如果通過檢查，渲染子元件
};

export default AdminRoute;

# 路由設定

在 App.js 或路由設定中，使用 AdminRoute 包裹管理員專屬頁面。

import AdminRoute from "./components/AdminRoute";

<Routes>
 {/* 若非後台管理員直接無法訪問該頁面 */}
 <Route path='/admin/userlist' element={<AdminRoute><UserListPage /></AdminRoute>} />
</Routes>;

此時若去訪問有被 AdminRoute 包裹的頁面，如果不是管理員，就會被導向首頁，這樣就能達到管理員專屬頁面的效果，並避免在每頁重複撰寫檢查邏輯。

Django React Redux Linux