javascript - 如何检测初始页面加载是否来自重定向

Question

我有一个reactjs应用程序，它使用firebase来对用户进行身份验证，并使用firebase xxxWithRedirect()方法链接到各种身份验证提供者帐户。例如，以下内容是从/users/settings 页面调用的。

var user = this.props.fb.auth().currentUser;
if (user !== null) {
  var provider = new firebase.auth.GoogleAuthProvider();
  user.linkWithRedirect(provider).then(function () {
      console.log('Successfully linked with Google account');
    },
    function (error) {
      console.log('Failed to link with Google account:  code=' + error.code + ' message=' + error.message);
    });
}
else {
  console.log('user is null');
}

身份验证完成后，身份验证提供程序将重定向回发起重定向的应用程序页面。例如:

导航至 http://localhost:3000/users/settings

在应用程序路由处理中，我希望能够确定初始页面加载是否来自重定向。这样我就可以确定在从身份验证提供程序重定向的情况下是否应该将用户带回/users/settings 页面，或者如果用户尚未经过身份验证并且不是身份验证重定向页面加载，则是否应该将用户带回到/页面.

        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/users/profile" render={() => (isLoggedIn() ? <UserProfile fb={fb}/> : <Redirect to="/"/>)}/>
          <Route exact path="/users/settings" render={() => (isLoggedIn() ? <UserSettings fb={fb}/> : <Redirect to="/"/>)}/>
          <Route component={NoMatch}/>
        </Switch>

有没有办法判断reactjs匹配的路由路径是否来自重定向？

Answer 1

@AndreWerlang 我能够通过使用 firebase.auth().getRedirectResult() 方法中提供的操作类型来解决我的问题。在这种特殊情况下，我想将用户带回到/user/settings 页面，因为这是用户可以链接其他身份验证提供商帐户的地方。通过检查操作类型是否试图“链接”另一个帐户，我只需再次重定向到/user/settings 页面，因为当从身份验证提供者收到第一次重定向到/users/settings 时，firebase 用户并不完整。这是代码。

componentDidMount = () => {
    firebase.auth().getRedirectResult().then(function(userCredential) {
        console.log('Successfully redirected');
        var operationType = userCredential.operationType;
        if (operationType) {
            console.log('Redirect operationType = ' + operationType);
            switch (operationType) {
                case 'signIn':
                   break;
                case 'link':
                   this.setState({redirectToUserSettings: true});
                   break;
                case 'reauthenticate':
                   break;
                default:
            }
        }
    }.bind(this), function(error) {}
}

render() {
    return (
        <div className="App">
            <Router history={history}>
                <div>
                    {this.state.redirectToUserSettings && <Redirect to="/users/settings" />}
                </div>
             </Router>
        </div>
    );
}