反应路由器身份验证重定向

Posted 2023-02-22

【中文标题】反应路由器身份验证重定向

【英文标题】：React Router Authentication Redirection

【发布时间】：2018-05-16 01:37:39

【问题描述】：

我目前正在使用React 和React Router V4 实施身份验证/登录流程。但我正在努力寻找一个有效的重定向“模式”来实现我的想法。

情况如下：

如果用户未登录到我的系统，他/她应该获得重定向 到“/login”，并呈现特定的登录页面组件。这应该是系统的要求，以便我可以共享我的应用程序的注册和登录链接。 如果用户登录，他/应该被重定向到用户最初想要访问的路线。

我目前的实现：

入口组件

export default class Entry extends React.Component 
  constructor(props) 
    super(props);
  

  render() 
    return (
        <Router>
          <Routes />
        </Router>
    );
  

Routes 组件（此处进行身份验证检查）

class Routes extends PureComponent 

  componentDidMount() 
    this.props.loadUser(); // async method (redux) loads the actual logged in user
  
  render() 
    return (
      <Switch>
        <Route path="/login" render=() => (!this.props.user.username ? <LoginPage ...this.props/> : <Redirect to="/app" />) />
        <Route path="/app" render=() => (this.props.user.username ? <AppPage ...this.props /> : <Redirect to="/login" />) />
        <Route exact path="/" render=props => <Redirect to="/app" /> />
      </Switch>
    );
  

export default Routes;

App 组件（此处为嵌套路由）

export default class App extends React.Component 
  constructor(props) 
    super(props);
  

  render() 
    const  match, user, logout  = this.props;
    return (
      <Switch>
         <Route path=`$match.path/about` component=About />
         <Route path=`$match.path` component=Home />
      </Switch>
    );
  

现在发生以下情况时会出现问题：

用户已登录，但已关闭我的应用程序选项卡 用户现在想访问/app/about 正在加载路由组件，但 this.props.user.username 是 null 用户被重定向到/login 现在异步方法this.props.loadUser() 更新了redux 存储，this.props.user.username 不再是null，然后用户被重定向到/app，但他原本想访问/app/about。

所以让我头疼的是

<Route path="/login" render=() => (!this.props.user.username ? <LoginPage ...this.props/> : <Redirect to="/app" />) />

我应该如何处理这种特定的方法，以便用户被重定向到他/她最初想要访问的 URL？

也许我的整体方法有点奇怪。

在此先感谢，感谢每一个帮助:)

【问题讨论】：

***.com/questions/47535919/… 可能会帮助你

感谢您指出这个问题，我试过了，但最后我选择了@Lokuzt 解决方案，它更适合我的用例

【参考方案1】：

由于您使用的是 react-router v4，我建议您阅读他们关于此主题的出色文档。 Here

const PrivateRoute = ( component: Component, ...rest ) => (
  <Route ...rest render=props => (
    fakeAuth.isAuthenticated ? (
      <Component ...props/>
    ) : (
      <Redirect to=
        pathname: '/login',
        state:  from: props.location 
      />
    )
  )/>
)

const AuthExample = () => (
  <Router>
    <div>
      <AuthButton/>
      <ul>
        <li><Link to="/public">Public Page</Link></li>
        <li><Link to="/protected">Protected Page</Link></li>
      </ul>
      <Route path="/public" component=Public/>
      <Route path="/login" component=Login/>
      <PrivateRoute path="/protected" component=Protected/>
    </div>
  </Router>
);

【讨论】：

感谢您从他们的文档中向我提供这段代码。我完全监督了state: from: props.location。这样就可以将用户导航到他/她最初想去的位置。非常感谢:)