Как я могу сделать роль мудро реагировать маршрутизации с аутентификацией?

Question

Я следовал за защищенной маршрутизацией в React router 4 примера, я вошел в систему, используя этот защищенный метод. Следующим шагом я хочу перейти с маршрутизацией на основе ролей, например, пользователь может перейти с / user, а admin - с / admin page.

class Routing extends Component {
    render(){
        return (
            <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute exact path="/" component={App} />
            </Switch>
        )
    }
}
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

В этом компоненте общий компонент для пользователя / администратора, после проверки роли пользователя / администратора в этом компоненте я хочу перенаправить пользователя как пользователя, если он пользователь или он будет администратором.

Даже я также хочу обрабатывать / пользовательский маршрутизатор и / административный маршрутизатор также глобально.

Это то, что я пытался, но, кажется, не работает ...

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="">
          <h1>Payement</h1>
        </header>
        <div>
          <Route exact path='/user' component={User} />
          <Route exact path='/admin' component={Admin} />
          {
            localStorage.getItem('role') === 'user' &&
            <Redirect to={'/user'} />
          }
          {
            localStorage.getItem('role') === 'admin' &&
            <Redirect to={'/admin'} />
          }
        </div>
      </div>
    );
  }
}

Answer 1

Заменить

 <PrivateRoute exact path="/" component={App} />

на

<PrivateRoute path="/" component={App} />

Проблема

Это связано с тем, что маршрут не будет выбран в направлении с exact проп.exact маршруты будут приниматься во внимание только тогда, когда маршруты идеально совпадают.

Очевидно, чтобы войти в систему как Администратор , вам нужно изменить компонент входа в систему, фактически входя в систему только как Пользователь .

login = () => {

          localStorage.setItem('role', this.uname.value);
          fakeAuth.authenticate(() => {
              this.setState({ redirectToReferrer: true });
            });
        };

Другие примечания

Кроме того, если я могу дать свои 2 цента, избегайте использования refs , если в этом нет необходимости.

Правильный способ получить входное значение, например,

 <input onChange={(event) =>  this.setState({loginvalue: event.target.value})} />

Затем получить его из состояния:

this.state.loginvalue

Answer 2

Это сработает после всех маршрутов в одном файле в компоненте маршрутизации.

class Routing extends Component {
    render(){
        return (
            <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute exact path="/" component={App} />
                <PrivateRoute path='/user' component={User} />
                <PrivateRoute path='/admin' component={Admin} />
            </Switch>
        )
    }
}

и удалит маршрут в файле app.js.