Действителен ли для проверки и Pu sh для другого URL в конструкторе компонента React?

Question

Я создал приложение маршрутизации на основе ACL, что означает, что у некоторых пользователей есть права на просмотр страниц, а у других нет. Во время выполнения Авторизованный пользователь может изменить привилегированный неавторизованный пользователь для доступа к страницам.

Пример: Изначально у Checker не было разрешения на доступ к странице, но когда администратор разрешает доступ к странице во время выполнения, он может получить доступ к этой странице. Я изменю доступ navbar в соответствии с пользовательским разрешением.

Это действительно для проверки привилегий в конструкторе и pu sh на нужную страницу.

class SomeComponent extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      ...some values
    }

    const user_data = localStorage.getItem('userData') // user data getting while login
    if(user_data.isAdmin === false || user_data.checker === false){
       this.props.history.push('/noauth');
    }
  }
}

Это действительно для pu sh в другой компонент без визуализации. Если он недействителен, это приведет к производительности или непредсказуемой проблеме?

Answer 1

В идеале эта проверка должна выполняться на уровне маршрутизатора. Примерно так

const isAuthenticated = () => {
  const user_data = localStorage.getItem('userData');
  if (user_data.isAdmin === false || user_data.checker === false) {
    return false;
  }
  return true;
};

const AuthenticatedRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        return isAuthenticated() ? <Component {...props} /> : <Redirect to="/noauth" />;
      }}
    />
  );
};

Здесь функция isAuthenticated возвращает, где аутентифицирован пользователь или нет. Вы можете проверить значение localStorage в isAuthenticated и вернуть.