1

我有一个 ReactJS 网站，我在其中尝试使用“@azure/msal-react”：“^1.0.0-beta.1”，但遇到了一些让我困惑的问题。

  1. 我的大部分页面都向公众开放。有些需要登录。如果我添加 MSALAuthenticationTemplate 如下（但使用interactionType=Redirect），一旦我启动站点，它就会要求我登录。我认为只有当我点击 AuthenticationTemplate 中的路由时才会这样做。

  2. 使用 InteractionType Popup 会导致 SPA 在启动时抛出异常 Error: Objects are not valid as a React child (found: object with keys {login, result, error})。如果您打算渲染一组子项，请改用数组。在 p 中（在 App.tsx:44）

  3. 出于某种原因，我的所有路由都返回主页，而不是加载相关组件，以及 AuthenticationTemplate 注释掉的事件。

我使用直接的 Javascript 进行了很多工作，但是在发布时遇到了 ESLint 问题，所以我认为 Typescript 可以帮助我解决这些问题。但现在它只是坏了。

render() {
        initializeIcons();

        return (
            <MsalProvider instance={msalClient} >
                <div className="d-flex flex-column h-100">
                    <TopMenu />

                    <div className="container-fluid flex-grow-1 d-flex">
                        <div className="row flex-fill flex-column flex-sm-row">

                            <BrowserRouter>
                                <MsalAuthenticationTemplate
                                    interactionType={InteractionType.Popup}
                                    errorComponent={this.ErrorComponent}
                                    loadingComponent={this.LoadingComponent}>
                                    <Switch>
                                        <Route path="/addevent">
                                            <AddEvent />
                                        </Route>
                                        <Route path="/mydashboard">
                                            <MyDashboard />
                                        </Route>
                                    </Switch>
                                </MsalAuthenticationTemplate >
                                <UnauthenticatedTemplate>
                                    <Switch>
                                        <Route path='/'>
                                            <Home />
                                        </Route>
                                        <Route path="/about">
                                            <About />
                                        </Route>
                                        <Route path="/contactus">
                                            <ContactUs />
                                        </Route>
                                        <Route path="/faq">
                                            <Faq />
                                        </Route>
                                        <Route path="/fetchevents">
                                            <FetchEvents />
                                        </Route>
                                        <Route path="/gettingstarted">
                                            <GettingStarted />
                                        </Route>
                                        <Route path="/partners">
                                            <Partners />
                                        </Route>
                                        <Route path="/privacypolicy">
                                            <PrivacyPolicy />
                                        </Route>
                                        <Route path="/sponsors">
                                            <Sponsors />
                                        </Route>
                                        <Route path="/termsofservice">
                                            <TermsOfService />
                                        </Route>
                                        <Route path="/userstories">
                                            <UserStories />
                                        </Route>
                                    </Switch>
                                </UnauthenticatedTemplate>
                                <div>
                                    <Footer />
                                </div>
                            </BrowserRouter>
                        </div>
                    </div>
                </div>
            </MsalProvider>
        );
4

1 回答 1

1

让我们从UnauthenticatedTemplate. 如果用户通过身份验证，则不会显示组件的子项。所以我猜你不想在那里使用它。例如，它的典型用途是登录/注销按钮。

另一个问题是，如果您使用的是和组件MsalAuthenticationTemplate的父级。问题是您正在保护未经身份验证的用户的开关和路由，但是如果您不想保护整个页面，则此组件应始终无需身份验证即可使用。SwitchRoute

在渲染期间，React 将逐个遍历您的组件，BrowserRouter并且它将尝试渲染的组件的第一个子组件是MsalAuthenticationTemplate，并且由于用户未经过身份验证，它会将用户重定向到登录页面。

这是来自 react-router 文档的引用：

Route 总是在技术上“渲染”，即使它渲染为 null。当 的路径与当前 URL 匹配时，它会呈现其子项（您的组件）。

因此，只有当路由被命中时才会渲染路由的子节点。因此，您需要将MsalAuthenticationTemplate组件作为路由的直接子级，甚至在此类组件内：

<Switch>
    <Route path="/addevent">
        <MsalAuthenticationTemplate
              interactionType={InteractionType.Redirect}
              authenticationRequest={loginRequest}
            >
            <AddEvent />
       </MsalAuthenticationTemplate>
    </Route>
    ...
</Switch>

对于重定向到您的主屏幕的所有网页，您应该exact在您的 Home 路由中添加关键字。此属性导致它也不匹配所有其他路由。单个“/”匹配您的所有其他路线。

于 2021-05-13T12:06:27.793 回答