时间戳

首页 > 解决方案 > 带有 MSAL 库的无限循环 React 示例

reactjs - 带有 MSAL 库的无限循环 React 示例

问题描述

我正在尝试无缝登录用户，没有登录按钮，因为它将托管在 Azure 上。但以无限循环结束并出现错误：

interaction_in_progress: Interaction is currently in progress. 
Please ensure that this interaction has been completed before calling an interactive API.  
For more visit: aka.ms/msaljs/browser-errors.

示例 Pagelayout 代码修改了来自https://github.com/AzureAD/microsoft-authentication-library-for-js的 Typescript 示例：

export const PageLayout = (props: any) => {
    const { instance,accounts,inProgress } = useMsal();
    if(instance.getActiveAccount() == null)
    {
        console.log('account =' + instance.getActiveAccount());
        instance.loginRedirect(loginRequest);
    }
    console.log('count =' + instance.getAllAccounts().length);
    console.log('active =' + instance.getAllAccounts());
    return (
        <>
            <Navbar bg="primary" variant="dark">
                <a className="navbar-brand" href="/">MS Identity Platform</a>
                {/* <SignInSignOutButton/> */}
            </Navbar>
            <h5 className="sample-header">Welcome to the Microsoft Authentication Library For Typescript - React Quickstart</h5>
            <br/>
            <br/>
            {props.children}
        </>
    );
};

标签： reactjsloopsmsalinfinite

解决方案

这个问题在这里解决： https ://github.com/AzureAD/microsoft-authentication-library-for-js/issues/3667

建议是使用useMsalAuthentication钩子或MsalAuthenticationTemplate 组件来实现页面加载时的自动登录。您可以将此示例用作指南。

推荐阅读