如何为React Router中基于iframe的路由实现权限保护？

嘿，我来帮你搞定这个iframe路由的鉴权跳转问题！你之前的方案只是在未授权时渲染了NewLandingPage，但没有触发路由跳转（URL不会更新，也没记录用户原本要访问的页面），所以咱们需要调整逻辑，用上Redirect组件来实现完整的鉴权跳转流程。

方案一：复用你的PrivateRoute组件（推荐） #

既然你已经有了现成的PrivateRoute，咱们可以稍微改造它，让它同时支持component和render两种用法，这样iframe路由也能复用这套鉴权逻辑，避免重复代码。

改造后的PrivateRoute组件： #

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

export default function PrivateRoute ({ component: Component, render, authed, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        authed === true
          // 如果传了component就渲染组件，传了render就执行render函数
          ? Component ? <Component {...props} /> : render(props)
          : <Redirect to={{ pathname: '/', state: { from: props.location } }} />
      }
    />
  )
}

用PrivateRoute包裹iframe路由： #

<BrowserRouter>
  <Switch>
    {/* 原来的组件路由保持不变 */}
    <PrivateRoute authed={this.state.isAuthenticated} path='/register' component={RegisterPage} />
    {/* iframe路由现在也用PrivateRoute的render属性 */}
    <PrivateRoute 
      authed={this.state.isAuthenticated} 
      path="/route1" 
      render={(props) => (
        <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" />
      )} 
    />
  </Switch>
</BrowserRouter>

方案二：直接修改iframe路由的render逻辑 #

如果你不想改动现有的PrivateRoute，也可以直接在iframe的Route里调整渲染逻辑，用Redirect替代NewLandingPage，同时带上来源页面的信息：

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

补充：登录后跳转回原页面 #

不管用哪种方案，Redirect都会把用户原本要访问的路径存在location.state.from里，你可以在登录页的登录成功逻辑里，跳回这个路径：

// 登录成功后的处理逻辑
handleLoginSuccess = () => {
  // 获取来源路径，默认跳转到首页
  const { from } = this.props.location.state || { from: { pathname: '/' } };
  this.props.history.push(from);
}

这样用户登录后就会自动回到之前访问的iframe路由页面啦～

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