集成MSAL.js 2.0与react-admin后LogoutButton的handleClick不生效

问题原因 #

1. 自定义LogoutButton未透传react-admin传入的内置属性，导致组件交互异常，点击事件无法触发
2. 在LogoutButton中重复初始化PublicClientApplication实例，新实例未持有当前用户的登录会话，就算触发点击也无法正常完成登出流程

解决方法 #

第一步：修改LogoutButton.js逻辑

• 透传所有父组件传入的props到MenuItem组件
• 使用useMsal钩子获取全局复用的MSAL实例，不要重复初始化
• 调整登出逻辑执行顺序

修改后的完整代码如下：

import * as React from 'react';
import { forwardRef } from 'react';
import { useLogout } from 'react-admin';
import MenuItem from '@material-ui/core/MenuItem';
import ExitIcon from '@material-ui/icons/PowerSettingsNew';
import { useMsal } from "@azure/msal-react";

const LogoutButton = forwardRef((props, ref) => {
    const logout = useLogout();
    const { instance } = useMsal();
    const handleClick = () => {
        console.log('Logout button clicked');
        // 先清理react-admin侧的登录状态
        logout();
        // 再触发MSAL的重定向登出，清理Azure AD侧的会话
        instance.logoutRedirect();
    };
    return (
        <MenuItem
            // 先透传所有react-admin传入的属性
            {...props}
            onClick={handleClick}
            ref={ref}
        >
            <ExitIcon /> 退出登录
        </MenuItem>
    );
});

export default LogoutButton;

可选优化（推荐）

你可以把MSAL登出逻辑统一放到react-admin的authProvider的logout方法中，不用在按钮组件里单独处理，逻辑更内聚：

// authProvider.js中logout方法示例
import { msalInstance } from './index'; // 导入全局初始化的msal实例

const authProvider = {
  // 其他方法省略
  logout: () => {
    msalInstance.logoutRedirect();
    return Promise.resolve();
  }
}

之后LogoutButton的handleClick只需要调用logout()即可，不用单独处理MSAL逻辑。

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