为Azure API Management开发者门户自定义小部件添加访问权限设置选项

由于自定义小部件没有内置的访问权限配置选项，你可以通过以下两种方式实现“登录后隐藏小部件”的需求：

方案一：通过SDK动态检测用户身份状态控制显示 #

在自定义小部件的代码中，利用APIM门户提供的SDK获取用户认证状态，动态决定是否渲染小部件内容：

1. 引入门户的UserManager工具类
2. 在组件初始化或渲染阶段，检查当前用户是否已认证
3. 监听用户登录/登出事件，实时更新显示状态

示例代码（React组件）：

import { UserManager } from '@azure/api-management-custom-widgets-sdk';

class CustomWidget extends React.Component {
  state = { isAuthenticated: false };

  async componentDidMount() {
    // 获取当前用户状态
    const currentUser = await UserManager.getCurrentUser();
    this.setState({ isAuthenticated: !!currentUser });

    // 订阅用户身份变化事件
    UserManager.subscribe((updatedUser) => {
      this.setState({ isAuthenticated: !!updatedUser });
    });
  }

  render() {
    // 已认证用户不渲染小部件
    if (this.state.isAuthenticated) return null;

    return (
      <div className="custom-widget-container">
        {/* 这里放置你的自定义小部件内容 */}
      </div>
    );
  }
}

方案二：利用页面访问权限控制（适合特定页面场景） #

如果你的自定义小部件仅放置在某一个页面中，可以直接给该页面设置访问权限为仅匿名用户可访问：

• 在门户编辑模式下，进入目标页面的设置
• 找到“访问控制”选项，配置为仅允许匿名用户访问
• 这样已认证用户访问该页面时会被重定向，自然看不到页面上的小部件

内容的提问来源于stack exchange，提问作者user2122524