React路由器:获取一个登录成功的url，并传递一个令牌，然后重定向到主页

React router: catch a login-success url with a token being passed then redirect to homepage

本文关键字：一个 主页 令牌 然后 重定向 成功 路由器 获取 登录 React url      更新时间：2023-09-26

我正在编写一个React应用程序，它具有基于令牌的授权：外部身份验证。服务将用户重定向到应用程序，并在url中传递一个令牌，如下所示：/login-success/?token=<token>。

在应用程序中，我需要捕获该令牌并存储在状态中。我的想法如下：

1( 创建LoginSuccess组件：

    class LoginSuccess extends React.Component {
      componentDidMount() {
        const {
          actions: { setToken, redirectToHomepage },
          location: { query }
        } = this.props
        setToken(query.token)
        redirectToHomepage()
      }
    }

2( Redux连接操作(在容器中(：setToken&redirectToHomepage

3( 添加子路由<Route path="/login-success" component={LoginSuccess} />

我的问题是：有更好/更简单的方法吗？

一个小更新：我可能正在使用componentWillReceiveProps

我不确定这是否是您想要的，当您指的是从查询param:捕获令牌的简单方法时

我通常使用URL结构，如：/login-success/<token>，然后在路由中，我使用：<Route path="/login-success/:token" component={LoginSuccess} />

然后，当我mapStateToProps时，我只做：

const mapStateToProps = (state, ownProps) => {
   return {
       token: ownProps.token
   };
};

现在，令牌在this.props对象中变得可以访问。

相关文章：