React Router:从根路径中排除路由

时间:2019-04-15 03:11:40

标签: reactjs

我目前正在为我的React应用设置基本身份验证。我有一个AppWithAuth类,该类包装了普通的App和一个Login页面。我的目标是在用户未通过身份验证时重定向到/login,但允许他们访问其他任何路由,例如/(仪表板路径),/users等。

我遇到的问题是该应用希望呈现根目录,但是如果未通过身份验证,则会重定向到登录名。但是由于登录路由已包含在根目录渲染中,因此该应用会无休止地重定向。有什么方法可以达到预期的效果?这是我的代码的要点:

应用程序:

class App extends React.Component {
  render() {
    return (
      <Router> {/* The main routes of the app, e.g. /users... */}
        ...
      </Router>
    )
  }
}

AppWithAuth:

class AppWithAuth extends React.Component {
  isAuthenticated = () => {
    // suppose this returns true if user is authenticated, false otherwise
  }

  render() {
    return (
      <Router>
        <Route path='login' component={Login} />
        <Route path='/' render={props => {
          return this.isAuthenticated ? (
            <App />
          ) : (
            <Redirect to='/login' />
          )
        }} />
      </Router>
    )
  }
}

2 个答案:

答案 0 :(得分:0)

该怎么办?

  1. 为经过身份验证的用户制作ProtectedRoute
export default ({ isAuthenticated, component: C, ...rest }) => {
  if (isAuthenticated) {
    <Route {...rest} render={props => <C {...props} />} />
  } else {
    return <Redirect to="/login" />
  }
}
  1. 使用路由器,在App.js中路由
import ProtectedRoute from './ProtectedRoute'
class App extends React.Component {
  isAuthenticated = () => {
    // suppose this returns true if user is authenticated, false otherwise
  }
  render() {
    return (
      <Router>
        <Route path='login' component={Login} />
        <ProtectedRoute path='/' component={Main} isAuthenticated={this.isAuthenticated()} />
      </Router>
    )
  }
}

ProtectedRoute仅接受经过身份验证的用户,其他任何重定向到/ login的用户

答案 1 :(得分:0)

如果使用Switch,则可以完全匹配路径。在这种情况下,顺序很重要-匹配的第一个路径将破坏开关,就像switch语句一样。如果需要,您还可以利用exact属性来完全匹配路径。例如:

                <Router>
                    <Switch>
                        <Route exact path="/login" component={Login} />
                        <Route
                            path="/"
                            render={props => {
                                return this.isAuthenticated ? (
                                    <App />
                                ) : (
                                    <Redirect to="/login" />
                                );
                            }}
                        />
                        <Route path="/home" component={App} />
                    </Switch>
                </Router>