React中能否配置多个SecureRoute？Okta集成React后登录控件重复及按钮位置异常的修复方案咨询

看来你在Okta集成的UI层面遇到了两个小问题——登录控件重复和Sign In按钮位置不对，结合你给出的路由配置，我来帮你梳理下可行的解决思路：

一、解决登录控件重复的问题 #

登录控件重复大概率是组件重复渲染或登录触发逻辑冲突导致的，结合你的路由结构，重点排查这几个点：

1. 检查Header与Login组件的内容重叠
   你的<Header/>放在<Security>内部，意味着所有路由都会渲染Header。如果Header里包含了Sign In按钮，同时Login组件又渲染了Okta的登录表单（比如LoginWidget），就会出现重复。

   • 解决办法：
     • 给Header里的登录按钮加登录状态+路由判断，确保用户未登录且不在Login页面时才显示按钮：

       // 在Header组件中引入必要的hook
       import { useOktaAuth } from '@okta/okta-react';
       import { useLocation } from 'react-router-dom';
       
       const Header = () => {
         const { authState, oktaAuth } = useOktaAuth();
         const location = useLocation();
       
         const handleLogin = () => oktaAuth.signInWithRedirect({ originalUri: '/' });
         const handleLogout = () => oktaAuth.signOut();
       
         return (
           <header>
             {/* 其他导航内容 */}
             {authState.isAuthenticated ? (
               <button onClick={handleLogout}>Sign Out</button>
             ) : location.pathname !== '/Login' && (
               <button onClick={handleLogin}>Sign In</button>
             )}
           </header>
         );
       };
       

     • 检查Login组件，确保它只渲染Okta的登录表单，不要额外添加Sign In按钮，避免和Header的按钮重复。

2. 修正onAuthRequired的回调逻辑
   如果onAuthRequired的实现不当，可能会在用户访问未授权路由时重复触发登录跳转，导致登录控件多次渲染。确保回调逻辑仅在需要时触发跳转：

   const onAuthRequired = () => {
     oktaAuth.signInWithRedirect({ originalUri: window.location.pathname });
   };
   

二、解决Sign In按钮位置错误的问题 #

位置错误通常和路由结构或CSS布局有关，按以下步骤排查：

1. 修复路由渲染逻辑（关键！）
   你的路由配置没有用<Switch>（React Router v5）或<Routes>（React Router v6）包裹，这会导致所有匹配的路由同时渲染（比如访问/Secure1时，Home和Secure1会一起渲染），可能打乱布局。

   • React Router v5版本调整：

     import { Switch } from 'react-router-dom';
     
     <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri} onAuthRequired={onAuthRequired}>
       <Header/>
       <Switch>
         <Route path='/' exact={true} component={Home}/>
         <Route path='/Login' exact={true} component={Login}/>
         <SecureRoute path='/Secure1' component={Secure1}/>
         <SecureRoute path='/Secure2' component={Secure2}/>
         <Route path='/callback' component={LoginCallback}/>
       </Switch>
     </Security>
     

   • React Router v6版本调整：

     import { Routes, Route } from 'react-router-dom';
     
     <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri} onAuthRequired={onAuthRequired}>
       <Header/>
       <Routes>
         <Route path='/' element={<Home/>}/>
         <Route path='/Login' element={<Login/>}/>
         <Route path='/Secure1' element={<Secure1/>}/>
         <Route path='/Secure2' element={<Secure2/>}/>
         <Route path='/callback' element={<LoginCallback/>}/>
       </Routes>
     </Security>
     

2. 调整CSS布局

   • 如果是Header里的按钮位置不对，直接修改Header组件的CSS样式，用flexbox、position等属性把按钮放到目标位置（比如右上角）。
   • 如果是Okta Login Widget自带的按钮位置问题，可以通过Widget的theme配置自定义样式：

     // Login组件中配置LoginWidget
     const config = {
       // 其他Okta配置
       theme: {
         button: {
           backgroundColor: '#007bff',
           borderRadius: '4px',
           // 根据需求添加布局相关样式，比如margin、alignSelf等
         }
       }
     };
     
     return <LoginWidget config={config}/>;
     

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