我有一个前端项目,我从外部 API 获取所有数据。如何管理用户访问应用程序页面的权限?
当用户登录时,我会获取不记名令牌以及用户对页面的权限列表(true 和 false)。
当一切都来自外部API并且我无法像使用身份时那样管理权限时,我如何管理权限?
我如何管理权限,而一切都来自 外部 API,当我们使用 Identity 时我无法管理它?
根据您的场景和描述,在不研究您的代码片段或当前实现的情况下,很难向您提出建议。
有很多方法可以根据您的 API 响应来管理您的权限。您可能会考虑基于角色的权限或基于声明的权限甚至基于策略的权限
但是,根据您的 API 响应,必须决定如何在客户端代码或前端中对其进行管理。
例如,如果您想根据API响应来管理页面权限,您首先需要获取响应,然后根据响应的结构,您应该编写一些javascript,然后设置条件来处理权限。
假设您有以下 API 响应格式:
{
"user_id": "123",
"username": "example_user",
"permissions": {
"page1": true,
"page2": false,
"page3": true
}
}
HTML:
您可以在 HTML 中执行以下操作:
<h1>Manage External API Permission</h1>
<div id="page1" style="display: none;">
<h2>Page 1</h2>
<p>This is page 1 content.</p>
</div>
<div id="page2" style="display: none;">
<h2>Page 2</h2>
<p>This is page 2 content.</p>
</div>
<div id="page3" style="display: none;">
<h2>Page 3</h2>
<p>This is page 3 content.</p>
</div>
脚本:
<script>
const userPermissions = {
"page1": true,
"page2": false,
"page3": true
};
function hasAccess(pageName) {
return userPermissions[pageName] === true;
}
function togglePageVisibility(pageName) {
const pageElement = document.getElementById(pageName);
if (hasAccess(pageName)) {
pageElement.style.display = "block";
} else {
pageElement.style.display = "none";
}
}
togglePageVisibility("page1");
togglePageVisibility("page2");
togglePageVisibility("page3");
</script>
注意: 根据示例,首先,您必须从 API 响应中检索用户权限。那么您应该具有检查用户是否有权访问特定页面的功能。最后,另一个功能需要根据用户的权限显示或隐藏页面,并检查和切换每个页面的可见性。
这不是真正的解决方案,只是为了与您分享如何进一步进行的想法。请参阅此官方文档以获取更多想法或指导您可以考虑采取哪些步骤。