React 高階組件是什么
官方解釋∶
高階組件（HOC）是 React 中用于復用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設計模式。
高階組件（HOC）就是一個函數，且該函數接受一個組件作為參數，并返回一個新的組件，它只是一種組件的設計模式，這種設計模式是由react自身的組合性質必然產生的。我們將它們稱為純組件，因為它們可以接受任何動態提供的子組件，但它們不會修改或復制其輸入組件中的任何行為。
HOC的優缺點：
- 優點∶ 邏輯復用、不影響被包裹組件的內部邏輯。
- 缺點∶hoc傳遞給被包裹組件的props容易和被包裹后的組件重名，進而被覆蓋
路由權限控制做什么？
主要就是判斷用戶是否登陸，只有登陸獲取到有效的token，才能跳轉到頁面。
思路：
判斷是否有 token ，如果有 token 則返回正常的組件，如果沒有 token 則跳轉到登陸頁。
實現：
因為是ts所以先定義參數類型，這里的ReactElement代表的是一個 React 元素例如：<div/> 或者是組件。之后我們獲取到 token ，通過 token 的有無判斷跳轉到相應頁面。
代碼：
封裝高階組件：
interface AuthRouteProps {children: React.ReactElement;
}export function AuthRoute({ children }: AuthRouteProps) {const token = getToken();if (token) {return <>{children}</>;} else {// 使用 Navigate 組件進行導航message.error("請先登錄");return <Navigate to="/login" />;}
}在路由配置文件中，引入封裝的組件，例如：
children: [{index: true,element: <Chat />},{path: '/paint',element: (<AuthRoute><Paint /></AuthRoute>)},{path: '/me',element: <div>我的</div>}]缺點：
目前只是通過判斷 token 有無，如果 token 失效了卻還是會跳轉，如果是跳轉到的頁面需要攜帶token 則可以在響應攔截器中進行處理：token 會發給后端，后端通過解密后來判斷用戶是否存在
// 添加響應攔截器
request.interceptors.response.use(function (response) {// 2xx 范圍內的狀態碼都會觸發該函數。// 對響應數據做點什么return response.data;},function (error) {// 超出 2xx 范圍的狀態碼都會觸發該函數。// 對響應錯誤做點什么if(error.status === 401){removeToken()router.navigate('/login')window.location.reload()}return Promise.reject(error);}
);如果只是單純的跳轉頁面的話要進行改造也是發一個請求給后端，后端通過處理返回給前端 token 是否有效：
export async function AuthRoute({children}){const token = getToken();// 模擬請求發給后端tokenconst res = await getUserInfo({ token });if (res.data.code) {return <>{children}</>;} else {return <Navigate to="/login" replace />;}
}所以要通過具體的業務來處理用戶登陸和 token 是否有效。
比較：
通過這樣的方式寫和直接在訪問頁面中判斷token有什么區別？
直接在訪問頁面時判斷：這種方式通常是在頁面組件加載或渲染時進行的，即在用戶已經導航到該頁面后才進行檢查。
使用AuthRoute組件：判斷是在路由跳轉之前進行的。當用戶嘗試訪問受保護的路由時，AuthRoute組件會首先檢查token，然后決定是否允許訪問或進行重定向。
)
