React-Router v6實現(xiàn)頁面級按鈕權(quán)限示例詳解

更新時間：2023年10月04日 11:46:27 作者：程序員王天

這篇文章主要介紹了使用 reac+reactRouter來實現(xiàn)頁面級的按鈕權(quán)限功能,這篇文章分三部分,實現(xiàn)思路、代碼實現(xiàn)、踩坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助

前言

通常情況下，咱們?yōu)橛脩籼砑訖?quán)限時，除了頁面權(quán)限，還會細(xì)化到按鈕級別，比如、新增、刪除、查看等權(quán)限。

如下效果，切換用戶登錄后，操作權(quán)限除了左側(cè)菜單，還有頁面按鈕。

實現(xiàn)思路

按鈕控制本質(zhì)是條件判斷，滿足條件顯示按鈕，否則禁用/消失。

假如每個頁面的按鈕權(quán)限都不同，簡單的條件判斷，肯定無法滿足，那如何實現(xiàn)呢？

王天覺得重點是權(quán)限數(shù)據(jù)結(jié)構(gòu)，如何獲取當(dāng)前頁面的按鈕權(quán)限數(shù)據(jù)，這需要和后端溝通好，定義頁面路徑和權(quán)限數(shù)據(jù)的映射關(guān)系

使用路由實現(xiàn)頁面按鈕權(quán)限

步驟：

在路由配置中添加頁面權(quán)限參數(shù)
通過路由實例，獲取當(dāng)前頁的權(quán)限
封裝按鈕權(quán)限組件，動態(tài)顯隱按鈕

實戰(zhàn)代碼

定義路由配置數(shù)據(jù)

需和后端配合，將按鈕權(quán)限和頁面路由一同返回

存儲路由和按鈕權(quán)限映射關(guān)系

既然無法通過路由實例獲取權(quán)限數(shù)據(jù)，那么我們手動創(chuàng)建一個對象，來存儲路由和按鈕權(quán)限映射關(guān)系。
用戶登錄后，在遍歷生成路由配置同時、將按鈕權(quán)限和頁面路徑的映射數(shù)據(jù)，存儲本地。

執(zhí)行如下代碼

按鈕權(quán)限組件

封裝按鈕權(quán)限組件，讀取本地權(quán)限數(shù)據(jù)、控制按鈕的顯隱、禁用狀態(tài)，代碼如下：

import { Tooltip } from 'antd';
import React from 'react';
import { useLocation } from 'react-router-dom';
interface IndexProps {
  scopeTtype:string, // 權(quán)限碼
  children:any// 子組件
}
const Index: React.FC<IndexProps> = (props) => {
  // 獲取當(dāng)前頁面的位置信息、
  const routeDom = useLocation(); 
  // 從本地緩存讀取 頁面路徑和權(quán)限數(shù)據(jù)
  const strPersstion = localStorage.getItem('pagePersstion');
  const pagePersstion = JSON.parse(strPersstion as string); 
  // 找到當(dāng)前頁的按鈕權(quán)限數(shù)據(jù)
  const currentPerssion = pagePersstion.find((item: { page: string; })=>item.page == routeDom.pathname);
  console.log('當(dāng)前頁面的按鈕權(quán)限',currentPerssion);
  //  有權(quán)限返回按鈕
  if(currentPerssion.permissions[props.scopeTtype]){
    return  props.children;
  }else{ 
    // 沒有則禁用、或者隱藏按鈕
    // 要實現(xiàn)按鈕禁用，需要設(shè)置組件的disabled 
    // 可是react 中的props是只讀無法修改，如何修改props中子組件呢？
    // 通過React API React.cloneElement 克隆出新的元素進行修改如下
    const Button = React.cloneElement(props.children, {
      disabled: true
    });
    return   <>
      <Tooltip title="暫無權(quán)限">  {Button}</Tooltip>
    </>;
  };
};
export default Index;

使用按鈕權(quán)限組件

<AuthButton scopeTtype="isDelete">
  <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
    批量刪除
  </Button>
</AuthButton>
<AuthButton scopeTtype="isAdd">
    <Button onClick={showModal}>新增員工</Button>
</AuthButton>

模擬的路由數(shù)據(jù)：員工管理頁面的路由、按鈕配置

效果：

當(dāng)切換用戶登錄后，很明細(xì)發(fā)現(xiàn)右側(cè)表格、操作按鈕權(quán)限變化。效果如下

以上全文完，最后總結(jié)一下reactRoute和vueRouter的實現(xiàn)區(qū)別。

vueRouter vs ReactRouter

vueRouter

此方案中，在vue中實現(xiàn)比較方便，使用vueRouter配置路由meta元信息、為按鈕權(quán)限的數(shù)據(jù)

{
  path: '/imgMove/:id',
    name: 'imgMove',
    meta: {
    itwangtianAuth: true
    // 此頁面是否token校驗
  },
  component: imgMove
}

在頁面路由實例中讀取meta數(shù)據(jù)，進行頁面級別的按鈕權(quán)限控制。

// 在 Vue 組件中獲取路由的 meta 數(shù)據(jù)
export default {
  name: 'ExampleComponent',
  mounted() {
    // 獲取當(dāng)前路由對應(yīng)的路由記錄
    const route = this.$route; 
    // 獲取該路由記錄的 meta 數(shù)據(jù)
    const meta = route.meta; 
    // 使用 meta 數(shù)據(jù)
    console.log(meta.itwangtianAuth); 
  }
}

ReactRouter

但是，在react-Router6版本中沒有路由元信息配置，就算自定義路由屬性，也無法獲取，如下是踩坑代碼，大家看看就行、可不要嘗試了

踩坑記錄

踩坑代碼-添加路由自定義屬性，獲取權(quán)限數(shù)據(jù)首先，在路由配置中設(shè)置自定義屬性，例如 title 和 requiresAuth：

<Route
  path="/dashboard"
  element={<Dashboard />}
  title="Dashboard"
  requiresAuth={true}
  />

然后，在 Dashboard 組件中可以通過 useRoutes() 鉤子獲取路由傳遞的屬性，如下所示：

import { useRoutes, useParams, useNavigate } from 'react-router-dom';
function Dashboard() {
  const params = useParams();
  const navigate = useNavigate();
  // 訪問路由傳遞的屬性
  const { title, requiresAuth } = useRoutes().pathname;
  // 在這里使用元信息進行邏輯處理
  return (
    <div>
      <h1>{title}</h1>
      {/* 組件的其余部分 */}
    </div>
  );
}

結(jié)果不用說了，報錯啊啊啊啊啊啊啊

在react-route6中無法自定義路由屬性，報錯日志如下