快捷導(dǎo)航

React封裝高階組件實(shí)現(xiàn)路由權(quán)限的控制詳解

更新時(shí)間：2025年02月03日 10:42:37 作者：shenyaofeng

這篇文章主要介紹了React封裝高階組件實(shí)現(xiàn)路由權(quán)限的控制,在React中,為了實(shí)現(xiàn)安全可靠的路由權(quán)限控制,可以通過(guò)多種方式來(lái)確保只有經(jīng)過(guò)授權(quán)的用戶(hù)才能訪(fǎng)問(wèn)特定路徑下的資源,下面來(lái)介紹封裝高階組件控制的方法,需要的朋友可以參考下

React高階組件是什么

官方解釋∶

高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。

高階組件（HOC）就是一個(gè)函數(shù)，且該函數(shù)接受一個(gè)組件作為參數(shù)，并返回一個(gè)新的組件，它只是一種組件的設(shè)計(jì)模式，這種設(shè)計(jì)模式是由react自身的組合性質(zhì)必然產(chǎn)生的。我們將它們稱(chēng)為純組件，因?yàn)樗鼈兛梢越邮苋魏蝿?dòng)態(tài)提供的子組件，但它們不會(huì)修改或復(fù)制其輸入組件中的任何行為。

HOC的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)∶ 邏輯復(fù)用、不影響被包裹組件的內(nèi)部邏輯。
缺點(diǎn)∶hoc傳遞給被包裹組件的props容易和被包裹后的組件重名，進(jìn)而被覆蓋

路由權(quán)限控制做什么

主要就是判斷用戶(hù)是否登陸，只有登陸獲取到有效的token，才能跳轉(zhuǎn)到頁(yè)面。

思路：

判斷是否有 token ，如果有 token 則返回正常的組件，如果沒(méi)有 token 則跳轉(zhuǎn)到登陸頁(yè)。

實(shí)現(xiàn)：

因?yàn)槭莟s所以先定義參數(shù)類(lèi)型，這里的ReactElement代表的是一個(gè) React 元素例如：<div/> 或者是組件。之后我們獲取到 token ，通過(guò) token 的有無(wú)判斷跳轉(zhuǎn)到相應(yīng)頁(yè)面。

代碼

封裝高階組件：

interface AuthRouteProps {
  children: React.ReactElement;
}
export function AuthRoute({ children }: AuthRouteProps) {
  const token = getToken();
  if (token) {
    return <>{children}</>;
  } else {
    // 使用 Navigate 組件進(jìn)行導(dǎo)航
    message.error("請(qǐng)先登錄");
    return <Navigate to="/login" />;
  }
}

在路由配置文件中，引入封裝的組件，例如：

children: [
      {
        index: true,
        element: <Chat />
      },
      {
        path: '/paint',
        element: (
          <AuthRoute><Paint /></AuthRoute>
        )
      },
      {
        path: '/me',
        element: <div>我的</div>
      }
    ]

缺點(diǎn)

目前只是通過(guò)判斷 token 有無(wú)，如果 token 失效了卻還是會(huì)跳轉(zhuǎn)，如果是跳轉(zhuǎn)到的頁(yè)面需要攜帶token 則可以在響應(yīng)攔截器中進(jìn)行處理：token 會(huì)發(fā)給后端，后端通過(guò)解密后來(lái)判斷用戶(hù)是否存在

// 添加響應(yīng)攔截器
request.interceptors.response.use(
  function (response) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response.data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    if(error.status === 401){
      removeToken()
      router.navigate('/login')
      window.location.reload()
    }
    return Promise.reject(error);
  }
);

如果只是單純的跳轉(zhuǎn)頁(yè)面的話(huà)要進(jìn)行改造也是發(fā)一個(gè)請(qǐng)求給后端，后端通過(guò)處理返回給前端 token 是否有效：

export async function AuthRoute({children}){
  const token = getToken();
  // 模擬請(qǐng)求發(fā)給后端token
  const res = await getUserInfo({ token });
  if (res.data.code) {
    return <>{children}</>;
  } else {
    return <Navigate to="/login" replace />;
  }
}

所以要通過(guò)具體的業(yè)務(wù)來(lái)處理用戶(hù)登陸和 token 是否有效。