LogoutButton.js 中的 handleClick() 不起作用答案

【问题标题】：handleClick() in LogoutButton.js is not workingLogoutButton.js 中的 handleClick() 不起作用
【发布时间】：2021-10-25 09:46:35
【问题描述】：

我已将 MSAL.js 2.0 与 react-admin 集成，以便将 Azure Active Directory 用作身份验证提供程序。基于 react-admin Auth 提供者示例和链接 (https://github.com/victorp13/react-admin-msal) 我已经实现了登录。效果很好，我的 react-admin 前端得到了正确的保护。

但我无法成功实现注销。如果我遵循 react-admin 文档 (https://marmelab.com/react-admin/Authentication.html#uselogout-hook)，我的 LogoutButton.js 代码将被忽略。

索引.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalProvider, MsalAuthenticationTemplate } from "@azure/msal-react";
import { msalConfig } from "./authConfig";

const msalInstance = new PublicClientApplication(msalConfig);

ReactDOM.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
        <App />
      </MsalAuthenticationTemplate>
    </MsalProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

App.js

import * as React from "react";
import { Admin, Resource, ListGuesser, fetchUtils } from "react-admin";
import dataProvider from "./dataProvider";
import LogoutButton from './LogoutButton';

const App = () => (
  <Admin dataProvider={dataProvider} logoutButton={LogoutButton}>
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

export default App;

LogoutButton.js

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 { PublicClientApplication } from "@azure/msal-browser";
import { msalConfig } from "./authConfig";

const LogoutButton = forwardRef((props, ref) => {
    const logout = useLogout();
    const handleClick = () => {
        console.log('Logout button never clicked!');
        const msalInstance = new PublicClientApplication(msalConfig);
        msalInstance.logoutRedirect();
        logout();
    };
    return (
        <MenuItem
            onClick={handleClick}
            ref={ref}
        >
            <ExitIcon /> Disconnect
        </MenuItem>
    );
});

export default LogoutButton;

有什么好办法吗？谢谢！

问候

【问题讨论】：

你确定是什么问题了吗？

标签： react-admin

【解决方案1】：

您需要使用 authProvider 才能正确使用 react-admin 提供的身份验证功能。如果您可以在单击时分享您的控制台错误，我想我可以有更多的见解。不过，我要做的第一件事是覆盖 authProvider 的注销功能，以下是您自己编写的接口。你想要做的是从你的 handleClick 函数中取出所有逻辑，只留下 logout() 回调。然后是 msal 逻辑，你想把它放在 logout 里面，就像这样。

import { AuthProvider } from 'react-admin';

const authProvider = {
    // authentication
    login: ({ username, password }) => { /* ... */ },
    checkError: (error) => { /* ... */ },
    checkAuth: () => { /* ... */ },
    logout: () => { 
         console.log('Logout button never clicked!');
         const msalInstance = new PublicClientApplication(msalConfig);
         msalInstance.logoutRedirect();
    },
    getIdentity: () => { /* ... */ },
    // authorization
    getPermissions: (params) => { /* ... */ },
}.

【讨论】：