Question

所以我已按照this question中的答案来根据用户是否经过身份验证来执行路由器。

我的路线看起来像这样（这是仅限身份验证的应用程序） -

"/" -> Login
 |
 |
 |- "/home" -> User Home page based on some criteria of the logged in user
 |
 |- "/catalog" -> Catalog page based on some criteria of the logged in user

简而言之，/home和/catalog是受保护的路由，只允许经过身份验证的用户。必须将所有未经过身份验证的用户路由到root，即"/"，即登录页面。身份验证检查功能是Async所以我的index.js和App.js就像这样 -

index.js

import PrivateRoute from './App';

<BrowserRouter>
  <div>
    <Switch>
      <PrivateRoute path="/home" component={Client}/>
      <PrivateRoute path="/catalog" component={Catalog}/>
      <PrivateRoute path="/" component={Landing}/>
    </Switch>
  </div>
</BrowserRouter>

App.js

class App extends Component {
  state = {
    loading: true,
    isAuthenticated: false,
    role: ''
  };

  componentDidMount() {
    getUserSession((isValid,session,err) => {
      if (isValid){
        console.log('is Valid Session');
        this.setState({
          loading: false,
          isAuthenticated: isValid,
        });
      }else if (err){
        console.log('is InValid Session');
        this.setState({
          loading: false,
        });
      }
    });
  }

  render() {
    const { component: Component, ...rest } = this.props
    console.log(this.props);
    return (
      <Route
        {...rest}
        render={props =>
          this.state.isAuthenticated ? (
            <Component {...props} />
          ) : (
              this.state.loading ? (
                <div>LOADING</div>
              ) : (
                  <Redirect to={{ pathname: '/', state: { from: this.props.location } }} />
                )
            )
        }
      />
    )
  }
}

值得注意的是，我没有使用Redux来获取用户的身份验证状态，而是使用AWS Amplify方法调用来简单地获取用户会话。 getUserSession函数返回用户会话是否有效以及会话对象等其他一些信息。

我有2个问题 -

当未经过身份验证的用户进入时，重定向会导致无限循环，因为"/"会再次通过Redirect进行身份验证检查，从而导致Maximum update depth exceeded由于在App.js中调用setState而导致错误。
如果用户经过身份验证，那么他们最终会进入App.js中的<Component {...props} />行。只要用户点击特定的/home或/catalog路由，就可以了。但是，如果用户已通过身份验证并按下根路由/，我希望他们将其重定向到/home或/catlog路由之一，而我根本就没有得到如何那样做。

非常感谢任何见解。

使用React-router

0 个答案: