Question

我目前正在为我的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>
    )
  }
}

Answer 1

该怎么办？

为经过身份验证的用户制作ProtectedRoute

export default ({ isAuthenticated, component: C, ...rest }) => {
  if (isAuthenticated) {
    <Route {...rest} render={props => <C {...props} />} />
  } else {
    return <Redirect to="/login" />
  }
}

使用路由器，在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的用户

Answer 2

如果使用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>

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

2 个答案: