Реагировать: аутентификация на всех маршрутах

Question

У меня есть приложение, которое использует redux-oid c в качестве помощника для аутентификации пользователей. Я просмотрел пример приложения о том, как правильно настроить аутентификацию пользователей, но в примере им нужно будет проверить, вошел ли пользователь на каждой странице, прежде чем отправлять его на страницу входа.

Приложение, которое я создаю, имеет маршрутизатор с множеством различных маршрутов. Мне было интересно, как проверить, если пользователь вошел в систему, независимо от того, какой маршрут они вводят, не дублируя код для каждого компонента?

Маршрутизатор:

export default function Routes(props) {
  return (
    // Replace Router with our own component and add authenication
    // https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71
    <Router history={history}>
      <Route path="/" component={HomePage}/>
      <Route path="/test1" component={TestPage1}/>
      <Route path="/test2" component={TestPage2}/>
      <Route path="/test3" component={TestPage3}/>
      <Route path="/callback" component={CallbackPage} />
    </Router>
  );
}

Это пример Маршрутизатор с 4 маршрутами: Home, Test1, Test2 и Test3.

Домашняя страница:

function HomePage(props) {
  const { user } = props;

  return !user || user.expired ? <LoginPage /> : (
    <div>
      <h1>Awesome Main Page!</h1>
      <h3>{user ? user.profile.name : "Mister Unknown"}</h3>
    </div>
  );
}

В компоненте Домашняя страница мы проверяем, аутентифицирован ли уже пользователь , Если это не так, то он переходит на страницу входа.

Тестовая страница:

function TestPage1(props) {
  const { user } = props;

  return !user || user.expired ? <LoginPage /> : (<div><h1>Test Page 1</h1><h3>{user ? user.profile.name : "Mister Unknown"}</h3></div>);
}

На каждом из компонентов тестовой страницы в маршрутизаторах мы также должны проверить, является ли пользователь проверку подлинности. Кажется, это go противоречит принципам DRY, и для каждого нового маршрута, который мы создаем, мы должны будем снова проверять аутентификацию.

Это нормальный / правильный способ проверки аутентификации или есть лучший как следовать принципам DRY?

Answer 1

Я всегда находил самый надежный вариант - иметь дело с входами в большинство приложений как часть вызовов API:

• Фрагменты вызовов интерфейса API
• Если действительных нет токен или срок его действия истек, затем перенаправьте на вход в систему
• Это касается как первоначального входа в систему, так и истечения сеанса

Ключевые классы, как правило, сосредоточены на следующих обязанностях:

• API-клиент
• Аутентификация и обработка токенов

Ваши представления React затем могут быть продуктивно написаны без каких-либо OAuth сантехника. Если вам интересно, посмотрите мой пример кода , напишите .

. Я не претендую на звание большого эксперта React JS, но с удовольствием отвечу на последующие вопросы по обработке OAuth, если это помогает.

Answer 2

нет, это не правильный путь.

маршрут. js

<Router history={history}>
  <Switch>
    <PublicRoute path="/" component={Home} exact= {true} />
    <PrivateRoute path="/Test1" component = {Testpageone} />
    <PrivateRoute path="/Test2" component= {Testpagetwo} />
  </Switch>
</Router>

PrivateRoute. js

import {Redirect} from "react-router-dom"


 const { user } = props;

 return (
<Route
  {...rest}
  component={props =>
    user ? (
      <div>
        <Component {...props} />
      </div>
    ) : (
      <Redirect to="/" />
    )
  }
/>
);

PublicRoute. js

 const { user } = props;
 return (
<Route
  {...rest}
  component={props =>
    user ? <Redirect to="/test1" /> : <Component {...props} />
  }
/>
);
};

надеюсь, это поможет