Django React Redux Linux

Django + React 電商專案練習 [???] - 後台實作-路由結構最佳化寫法

非管理員使用者重新導向至登入頁面，不必在每個頁面都額外撰寫檢查權限的作法

Posted by Young on 2022-12-29

Estimated Reading Time 1 Minutes

Words 309 In Total

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

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

創建高階元件（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 包裹的頁面，如果不是管理員，就會被導向首頁，這樣就能達到管理員專屬頁面的效果，並避免在每頁重複撰寫檢查邏輯。

若您覺得這篇文章對您有幫助，歡迎分享出去讓更多人看到⊂◉‿◉つ~

留言版