Примеры React / Redux?

Question

[campus1]

Здравствуйте. Хорошо знаком с React / Redux. Сейчас хочу начать разрабатывать довольно большой проект (для себя) (API сторонний). И у меня появился ряд интересующих вопросов
1. Как реализуется такая штука как пагинация? Интересует именно она, т.к Infinite scroll & Load more я знаю как сделать.
2. Как реализовать аутентификацию? Интересует как определять авторизированного юзера от только вошедшего (я думаю с помощю localStorage).
P.S для auth хочу юзать JWT || OAuth2

Накидайте пожалуйста примеров / статтей / туториалов что-бы посмотреть.

Большое спасибо за ответы.

Answer 1

[Anton Filippov]

1) https://react.semantic-ui.com/addons/pagination
2) лучше в кукис, получаете токен с сервера кладёте туда, в запросах берете токен из них

Comments

[campus1]

А смотрите, например у меня есть компонент Login и компонент всего приложение грубо говоря.

<Route path={PAGE.login}      component={C.Login}/>
<Route path={'/'} component={C.Main}>
   <Redirect to={PAGE.companies}/>
<Route path={PAGE.companies}          component={C.Companies} />
<Route path={PAGE.stars}          component={C.Stars} />

При заходе на сайт, где делать проверку на то, что юзер авторизован или нет? Если нет кидать его на компонент Login, если да то кидать на '/', а там уже редирект сам перекинет на нужный компонент.

[Anton Filippov]

campus1, https://reacttraining.com/react-router/web/example...

Answer 2

[Sergiu Mitu]

1. Как реализуется такая штука как пагинация? Интересует именно она, т.к Infinite scroll & Load more я знаю как сделать.

Ну пагинация это тоже самое что и LoadMore, только в случае с loadmore вы просто к массиву элементу добавляете новые полученные, а в пагинации их просто заменяете.

2. тут согласен с Anton Filippov

Comments

[campus1]

А смотрите, например у меня есть компонент Login и компонент всего приложение грубо говоря.

<Route path={PAGE.login}      component={C.Login}/>
<Route path={'/'} component={C.Main}>
   <Redirect to={PAGE.companies}/>
<Route path={PAGE.companies}          component={C.Companies} />
<Route path={PAGE.stars}          component={C.Stars} />

При заходе на сайт, где делать проверку на то, что юзер авторизован или нет? Если нет кидать его на компонент Login, если да то кидать на '/', а там уже редирект сам перекинет на нужный компонент.

[Sergiu Mitu]

campus1, лучше всего делать это на стороне сервера и выдавать информацию о юзере в json, ну скажем в window.initialData. Однако если такой воможности нет, можно проверять это и на клиенте и не рендерить ничего пока ответ об юзере не придет с сервера, но это решение такое себе хотя и сам использовал когда нет возможности передать с сервера.
В роутах на фронте просто проверяете если клиент авторизован показываете компонент, если нет то редирект.

[campus1]

Sergiu Mitu, А можете пожалуйста пример привести??

[Sergiu Mitu]

axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['X-Access-Token'] = Cookies.get('access_token');

//auth check
let store;
const access_token = Cookies.get('access_token');
let afterAuthCheck = new Promise((res) => {
	if (access_token) {
		axios.post(`${API_URL}/account.get`)
			.then(({data}) => {
				let res = data;
				if (res.status === "success" && res.data && res.data.id) {
					initialState.auth.account = res.data
				}
				store = createStore(initialState);
				res();
			})
			.catch((error) => {
				store = createStore(initialState);
				res();
			});
	} else {
		store = createStore(initialState);
		res();
	}
});

afterAuthCheck.then(()=>{ //after auth check render	
	render(
		<Provider store={store}>
			<BrowserRouter>
				<Route path={'/'} component={App} />
			</BrowserRouter>
		</Provider>,
		document.querySelector("#root")
	)
});

Answer 3

[Vlad]

Приветствую!

1) Пагинация. Основная работа здесь ложиться на backend (в идеале). Именно туда с сайта идут запросы с параметрами (page, sortBy, limit, filter, etc) и результаты просто рисуются (в таблице например). Но так как у вас он "сторонний", то могут быть нюансы.

2) Я не пойму, что понимается под "только вошедшим" юзером. Если он "вошел", то он прошел аутентификацию и авторизацию. Или имеется ввиду просто человек, который первый раз открыл ваш сайт и у него нет логина/пароля?

В общих чертах, делал так: на сервер уходил логин/пароль, с сервера возвращался token, refresh_token, expiration_date, которые сохранялись в localStorage (token еще в редаксе хранился).
Далее, перед каждым запросом делалась простая проверка срока действия токена, и либо пускаем дальше, либо обновляем токен (и пускаем дальше в случае успеха), либо просим снова логин-пароль. (Такаяже логика при первом заходе читаем токен из localStorage и по кругу).

Читать-смотреть можно что угодно, по своей теме с приставкой "Advanced" ;)

Посмотреть можно этот туториал. Я отсюда брал идею "авторизации токенами".

P.S. Для больших проектов еще хорошо бы продумать их структуру, чтобы не было мучительно больно :)