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

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

        <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()方法中提供的operationType来解决我的问题。在这种特殊情况下，我想将用户带回/ user / settings页面，因为这是用户可以链接其他身份验证提供程序帐户的位置。通过检查operationType是否是尝试“链接”另一个帐户，我只是再次重定向到/ user / settings页面，因为当从auth提供程序收到第一次重定向到/ 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>
    );
}

Answer 2

要么：1）找到一种方法来为重定向的东西（如果可能的话）提供自定义URL，并在其上放置类似“？redirect = true”的内容，否则 2）使用服务器会话变量来保存一个标志，表明它将期望获得重定向。

Answer 3

如果存在计时问题，Firebase Auth会在填充user对象之前返回到您的页面，则需要有一种方法可以在准备好时等待/检索此信息。

来自https://firebase.google.com/docs/auth/web/google-signin#redirect-mode：

firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // ...
  }
  // The signed-in user info.
  var user = result.user;
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

来自https://firebase.google.com/docs/reference/js/firebase.auth.Auth#getRedirectResult：

如果登录成功，则返回已登录的用户。如果登录是不成功，失败并出错。如果没有重定向操作调用，返回一个UserCredential，其用户为空。

因此，此时您将知道用户何时进行身份验证并处理它。

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

3 个答案: