Reactjs 如何保护基于iframe的react路由

目前我有一个带有身份验证实现的react路由器。它适用于简单的基于组件的路由。 这是我的PrivateRoute组件

import {  Route } from "react-router-dom";
import React from 'react';
import { Redirect } from 'react-router'

    export default function PrivateRoute ({component: Component, authed, ...rest}) {
        return (
          <Route
            {...rest}
            render={(props) => authed === true  
              ? <Component {...props} /> 
              : <Redirect to={{pathname: '/', state: {from: props.location}}} />} 
          /> 
        )
      }

从“react router dom”导入{Route}；
从“React”导入React；
从“react router”导入{Redirect}
导出默认函数PrivateRoute（{component:component，authed，…rest}）{
返回(
授权===true
?  
: } 
/> 
)
}

这些路线都能正常工作

<BrowserRouter>
        <Switch>
            <PrivateRoute authed={this.state.isAuthenticated} path='/register' component={RegisterPage} />
        </Switch>
    </BrowserRouter>

问题发生在那些没有组件的路由类型上

<Route path="/route1" render={(props) => <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" />} /> 

}/>

这是我建议的解决方案，使其作为专用路由工作，但问题是它缺少url重定向

<Route path="/route1" render={(props) => ((this.state.isAuthenticated) ? <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" /> : <NewLandingPage {...props} /> )} />

（（this.state.isAuthenticated）？：）}>

---

那么，如何使用iframe实现重定向呢？

如果有人从谷歌无意中发现它，请将其作为答案发布：

<Route path="/route1" render={(props) => ((this.state.isAuthenticated) ? <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" /> : <Redirect to='/my/link' /> )} />

（（this.state.isAuthenticated）？：）}>

我编辑了ProtectedRoute，因此它也可以与iframe一起使用

import { Route } from 'react-router-dom';
import React from 'react';
import { Redirect } from 'react-router';

export default ({ component: Component, render: renderFn, authed, ...rest }) =>
  Component ? (
    <Route
      {...rest}
      render={props =>
        authed === true ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/', state: { from: props.location } }} />
        )
      }
    />
  ) : (
    <Route {...rest} render={props => authed === true ? () => renderFn(props) : () => <Redirect to="my/link" />} />
  );

从'react router dom'导入{Route}；
从“React”导入React；
从“react router”导入{Redirect}；
导出默认值（{component:component，render:renderFn，authed，…rest}）=>
组件？(
授权===真(
) : (
)
}
/>
) : (
授权===true？（）=>renderFn（道具）：（）=>}/>
);

并调用iFrame路由，如下所示：

<Route authed={this.state.isAuthenticated} path="/route1" render={props => <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" />} />

}/>

你是什么意思？你为什么不渲染

而不是

？这确实很管用@SagiRika，尽管我会尝试将其制作成某种ProtectedFrameRoute，只是为了让它更干净。我编辑了我的评论，将编辑好的ProtectedRoute包含在其中，以匹配这两种情况。你能告诉我你调整了什么吗，因此我可以相应地编辑我的答案？我必须将授权状态传递给iframe路由的调用

}/>