在JavaScript中處理用戶權限

開發強大的Web應用程序通常涉及管理用戶權限。本文展示了一種干淨有效的方法，用於處理前端中用戶權限的方法，無論您選擇的框架如何（React，Vue或Plain JavaScript）。我們將假設一個寧靜的API後端，但是模式適應其他架構。

讓我們考慮一個文檔管理器應用程序，其中包括Admin（完整訪問），編輯器（創建，查看，編輯）和訪客（僅查看）等角色。後端應提供用戶角色信息。對於此示例，API響應可能包括一個accessLevel屬性：

 {
  ID：1，
  標題：“我的第一個文檔”，
  作者：742，
  AccessLevel：“ Admin”，
  內容： {...}
}

至關重要的是，前端不應是權限的唯一仲裁者。後端驗證對於防止未經授權的訪問至關重要。

建立常數

為了清晰和可維護性，為單獨文件中的動作和角色定義常數（例如， constants.js ）：

 const Action = {
  modify_file：“ modify_file”，
  view_file：“ view_file”，
  delete_file：“ delete_file”，
  create_file：“ create_file”
};

const角色= {
  管理員：“管理員”，
  編輯：“編輯”，
  客人：“客人”
};

導出{Actions，角色};

使用打字稿枚舉將增強類型安全性。這些常數提供：

• 真理的單一來源：輕鬆查看所有動作和角色。
• 類型安全：防止錯別字並提高代碼可讀性。
• 改進的文檔：簡化對團隊成員的理解。

定義權限映射

創建一個文件（例如， permissions.js ）以將操作映射到角色：

從“ ./constants.js”導入{action，warm};

const mappings = new Map（）;

mappings.set（action.modify_file，[roles.admin，roles.editor]）;
mappings.set（action.view_file，[roles.admin，roles.editor，roles.guest]）;
mappings.set（action.delete_file，[roles.admin]）;
mappings.set（action.create_file，[roles.admin，roles.editor]）;

導出默認映射；

該Map提供：

• 集中管理：輕鬆修改權限。
• 可測試性：易於使用快照測試進行測試。
• 可讀性：清晰的權限概述。

在UI中實施權限檢查

假設您有一個React組件渲染下拉菜單：

從“ ./ permissions.js”進口hasper;
從“ ./constants.js”導入{action};

函數下拉（{file}）{
  返回 （
    

{haspermission（file，actions.view_file）&&
• 重新整理
} {haspermission（file，actions.modify_file）&&
• 重命名
} {haspermission（file，actions.create_file）&&
• 複製
} {haspermission（file，actions.delete_file）&&
• 刪除
}

）； }

這使用hasPermission助手功能（下面說明）來根據用戶權限有條件地渲染菜單項。

hasPermission函數

此函數檢查用戶是否有所需的許可：

從“ ./permissions.js”導入映射；

功能haspermission（文件，操作）{
  如果（！文件？.accesslevel）返回false;
  返回mappings.has（action）&& mappings.get（action）.includes（file.accesslevel）;
}

導出默認haspermission;

這簡潔地檢查了給定動作的mappings以及是否包括用戶的accessLevel 。

擴展圖案

這種模式擴展到更複雜的方案。例如，添加許可證檢查：

 // ...（許可的常數）...

const licensemappings = new Map（）;
// ...（地圖操作給許可）...

功能haslicense（用戶，操作）{
  // ...（邏輯檢查許可證）...
}

函數hasAccess（文件，用戶，操作）{
  返回haspermission（文件，操作）&& haslicense（用戶，操作）;
}

或處理不同的文件類型：

 const typemappings = new Map（）;
// ...（地圖操作到文件類型和許可）...

功能hastypermession（文件，用戶，操作）{
  // ...（邏輯檢查文件類型權限）...
}

這允許對權限的粒狀控制。測試應該是全面的，包括用於映射的快照測試和許可功能的單元測試。使用React和測試的完整示例可在Codesandbox上使用。請記住，後端驗證仍然至關重要。

以上是在JavaScript中處理用戶權限的詳細內容。更多資訊請關注PHP中文網其他相關文章！