一對一原始碼，前端頁面許可權和按鈕許可權控制

一對一原始碼，前端頁面許可權和按鈕許可權控制

頁面許可權是一對一原始碼後臺系統中非常常見的需求，在前端實現頁面許可權和按鈕許可權是為了確保使用者只能訪問其有權訪問的頁面，並執行其有權執行的操作。本文介紹前端實現頁面許可權和按鈕許可權控制的流程和邏輯。

1. 獲取使用者當前許可權並且存在全域性狀態中

首先需要從一對一原始碼後端介面中獲取到當前使用者擁有的所有許可權列表，並且儲存在全域性狀態中（這個場景中使用全域性狀態庫是一個很合適的方式）。

export async function getInitialState() {
  // ...
  const userPermissions = await fetchUserPermissions();
  return {
    // ....
    userPermissions,
  };
}

2. 定義頁面許可權標記

需要將每個需要許可權控制的頁面和操作按鈕提前定義好許可權標記（某個 key），後續中使用使用者擁有的許可權和這個許可權標記對比當前使用者是否擁有許可權。

這裡直接寫成一份常量維護，方便在不同元件中使用和維護。

const PERMISSIONS = {
  PAGEA: {
    READ: "PAGEA_READ", // 頁面訪問許可權標記
    ADD: "PAGEA_ADD" // 頁面中操作按鈕許可權標記
    // ... 其他頁面中操作按鈕
  }
  // ... 其他頁面許可權標記
}

3. 路由和選單的許可權控制

將之前定義好的許可權標記一對一原始碼的路由和對應的頁面上。這裡使用裡自定義的欄位 meta 中的 permission，後續可以直接從當前路由資訊中取出這個頁面的許可權。

export const routes = [
  {
    path: '/pageA',
    component: 'PageA',
    access: 'canAccessRoute', // 會呼叫 src/access.ts 中返回的 canAccessRoute 進行鑑權
    meta: {
      permission: PERMISSIONS.PAGEA.READ, // 頁面訪問許可權標記
    },
  },
  {
    path: '/pageB',
    component: 'PageB',
    access: 'canAccessRoute', // 會呼叫 src/access.ts 中返回的 canAccessRoute 進行鑑權
    meta: {
      permission: PERMISSIONS.PAGEB.READ, // 頁面訪問許可權標記
    },
  },
];

編寫判斷使用者是否擁有頁面許可權判斷邏輯，其邏輯十分簡單，即判斷當前一對一原始碼路由許可權標記是否在使用者擁有的許可權中。

export default function access(initialState) {
  const { userPermissions } = initialState ?? {};
  function canAccessRoute(route: IRoute) {
    // 頁面對應的許可權標記，需要在當前使用者擁有的許可權中
    if (route.meta?.permission) {
      return userPermissions.includes(route.meta.permission);
    }
    // 無頁面許可權標記說明改頁面不需要許可權也能訪問
    return true;
  }
  return {
    canAccessRoute,
  };
}

4. 按鈕許可權控制

一對一原始碼的按鈕許可權的控制也可以依照之前頁面許可權的設計，先定義好操作按鈕許可權標記，然後判斷使用者是否擁有該許可權。

export default function access(initialState) {
  // ...
  function canAccessAction(permissions: string[]) {
    // 按鈕對應的許可權標記，需要在當前使用者擁有的許可權中
    return permissions.every((permission) => userPermissions.includes(permission));
  }
  return {
    // ...
    canAccessAction
  };
}

為一對一原始碼操作按鈕新增許可權控制時，可以使用封裝的通用的許可權元件，將該元件包裹操作按鈕，只需要傳入是否擁有許可權即可。

注意：除了前端對操作按鈕新增許可權控制，一般後端也需要在對應介面中根據使用者的角色和許可權進行校驗，返回允許或拒絕的結果。

function PageA() {
  const { canAccessAction } = useAccess();
  return (
   <Access accessible={canAccessAction([PERMISSIONS.PAGEA.ADD])}>
      <Button>新增</Button>
    </Access>
  )
}

封裝一個通用的許可權元件在 React 中是十分簡單的，例如 Umi 中的 Access 元件

export interface AccessProps {
  accessible: boolean;
  fallback?: React.ReactNode;
}
export const Access: React.FC<PropsWithChildren<AccessProps>> = (props) => {
  if (process.env.NODE_ENV === 'development' && typeof props.accessible !== 'boolean') {
    throw new Error('[access] the \`accessible\` property on <Access /> should be a boolean');
  }
  return <>{ props.accessible ? props.children : props.fallback }</>;
};

以上就是一對一原始碼，前端頁面許可權和按鈕許可權控制， 更多內容歡迎關注之後的文章