Как сделать авторизацию в react.js?

Question

[Xbbv1]

Здравствуйте.
Делаю авторизацию, общая схема такая: на закрытые страницы в роутерах стоит колбэк onEnter, в этом колбэке я проверяю значение из стора Залогинен? = true, Нет? = false.
Если не залогинен перекидываю на страницу login. Инпуты формы логина привязываю к значениям стора и потом отправляю на проверку в api.
Сейчас я хочу прикрутить кукисы и возник вопрос, где лучше всего проверять залогинен ли пользователь? Поставить колбэк onEnter на корневой роут / ?

Comments

[d'Ivan]

authorization != authentication

[Xbbv1]

Роман Мирр: спасибо за уточнение, возможно у Вас есть ответ на мой вопрос?

Answer 1

[Никита Гущин]

Вполне хорошее решение - проверять права доступа в onEnter. А для чего вам понадобились кукис (касаемо авторизации)? Токены лучше всего хранить в localstorage и синхронизировать с вашим store.

Сгруппируйте роуты, для которых нужна авторизация и ставьте коллбэк туда:

<Route path="/" component={App}>
  <Route onEnter={checkAuth}>{/* Auth routes */}</Route>
  {/* Home page route */}
  <IndexRoute component={Home}>
  {/* Other public routes /*}
  <Route path="about" component={AboutPage} />
</Route>

Comments

[Xbbv1]

а если на публичных страницах информация тоже должна подстраиваться под состояние авторизован \ нет (например, если пользователь авторизован, то сверху показывается логин и убрана кнопка авторизоваться), то в каком месте приложения нужно запрашивать аутентификацию? Просто вызывать функцию в любом месте до роутера? или на основной компонент / навесить еще один onEnter?

[Никита Гущин]

Xbbv1: это уже вопрос к тому, как вы храните состояние приложения (state). В случае с редаксом - сделайте отдельный редьюсер и сохраняйте там информацию о пользователе. В контейнере смотрите в стейти и прокидывайте флаг isAuth в ваши компоненты - а там уже isAuth && renderLoginBtn()

[Xbbv1]

Никита Гущин: я имею ввиду, если пользователь обновил страницу, то приложение должно с самого начала проверить есть ли у него токен в кукисах или в localstorage

[Никита Гущин]

Xbbv1: да, все верно. Также вы можете сделать синхронизацию через https://developer.mozilla.org/ru/docs/Web/API/Web_... . Т.е. если открыто две вкладки и на одной пользователь залогинился\разлогинился - на второй произойдет то же самое

[Иван Федоров]

Вся проблема в том, что я совсем начинающий разработчик, только пришел в контору, где предыдущий прогер здорово нагадил. Народ, помогите, это серьезно. HTML5/CSS3 - это не проблема,.