Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Получение данных о пользователе React / 16 сообщений из 16, страница 1 из 1
14.01.2019, 20:16
    #39759533
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Делаю приложение на ReactJS. Авторизацию сделал при помощи токенов (JWT). Когда пользователь входит в аккаунт, сервер отдает токены и данные юзера. Токены я сохраняю в localstorge-е. Но вот у меня возник вопрос. Сразу после авторизации данные пользователя есть. НО вот есть закрыть вкладку и открыть через какое-то время? данных о пользователе не будет, но будут токены. И вот сам вопрос. На каком этапе мне подгрузить данные пользователя, при этом проверив авторизован ли он (валидны ли токены).

Я пишу без redux-а. Создал UserStore как-то так:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
class UserStore {
 
    constructor() {
 
        this._userData = null;
 
        this._accessToken = LocalStorage.retrieve("accessToken");
        this._refreshToken = LocalStorage.retrieve("refreshToken");
 
    }
 
    isUserAuth() {
        return this._userData != null && this.isAccessTokenPresent() && this.isRefreshTokenPresent();
    }
 
    getUserData() {
        return this._userData;
    }
 
    storeUserData(data) {
        this._userData = new UserData(data);
    };
 
    getAccessToken() {
        return this.isAccessTokenPresent()?this._accessToken:"";
    }
 
    isAccessTokenPresent() {
        return this._accessToken != null;
    }
 
    storeAccessToken(token) {
        if (UserStore.isTokenValid(token)) {
            this._accessToken = token;
            LocalStorage.store("accessToken", this._accessToken);
        }
    };
 
    getRefreshToken() {
        return this.isRefreshTokenPresent()?this._refreshToken:"";
    }
 
    isRefreshTokenPresent() {
        return this._refreshToken != null;
    }
 
    storeRefreshToken(token) {
        if (UserStore.isTokenValid(token)) {
            this._refreshToken = token;
            LocalStorage.store("refreshToken", this._refreshToken);
        }
    }
 
    static isTokenValid(token) {
        return typeof token === "string" && token.length > 0;
    }
 
}
 
export default new UserStore();



Хотел сделать глобальный объект на всё приложение.
(Если говнокод то пишите. буду учиться).

И вот на каком этапе мне подгружать данные?
...
Рейтинг: 0 / 0
14.01.2019, 20:42
    #39759539
Petro123
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Tsyklop,
Ты хочешь учить React без примеров React?
Бери в сети пример и делай.
Сервер на любой запрос от тебя проверит токен и отфутболит.
...
Рейтинг: 0 / 0
14.01.2019, 20:55
    #39759543
irbis_al
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Tsyklop,
данных о пользователе не будет, но будут токены.

ну вот я вижу по коду что токены Вы сохраняете в localstorage
А UserData нет..?

Код: javascript
1.
2.
3.
4.
storeUserData(data) {
        this._userData = new UserData(data);
//Тут надо добавить LocalStorage.store('userdata',data);
    };
...
Рейтинг: 0 / 0
14.01.2019, 21:08
    #39759546
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
irbis_al,
ну как бы да. Можно зайти и что-то изменить в тех данных. Если что-то сделают в токене то их проблемы. Сервис выбросит на авторизацию.
...
Рейтинг: 0 / 0
14.01.2019, 21:11
    #39759547
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Petro123Tsyklop,
Ты хочешь учить React без примеров React?
Бери в сети пример и делай.
Ну вот что-то не нашел я примеров. Может Вы скинете пару примеров?
Petro123Сервер на любой запрос от тебя проверит токен и отфутболит.
ну, отфутболит. ок. Так что мне в каждом вызове апи копипастить код для проверки не реджектнул ли сервак запрос по причине неавторизации? я вот этого не пойму. Конечно можно сделать какое-то глобальное событие, на которое будут реагировать нужные компоненты, ну или в принципе приложение
...
Рейтинг: 0 / 0
14.01.2019, 21:37
    #39759553
Petro123
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Tsyklop,
Если вы не делали React hello world, то зачем всех запутали с авторизацией?
Кто с нее начинает?
...
Рейтинг: 0 / 0
14.01.2019, 21:45
    #39759555
irbis_al
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Tsyklopе реджектнул ли сервак запрос по причине неавторизации? я вот этого не пойму. Конечно можно сделать какое-то глобальное событие, на которое будут реагировать нужные компоненты, ну или в принципе приложение

Ну Вам нужно сделать модуль в котором Вы делаете post put get и т.д
Ну типа

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
export function sendPostDataput (postname,arraytosend,cb) {
    let promise=sendPostDatapput(postname,arraytosend);
    promise.then((result) => {cb(result,0);
    }, (err) => {cb(null,err);});
}
function sendPostDatapput (postname,arraytosend) {
    return new Promise((resolve,reject)=> {
        let data= JSON.stringify(arraytosend);
        console.log(data);
//И тут в header добавлять токен.
        let result= fetch(postname,{
            method: "put",
            headers: { 'Accept': 'application/json',
                'Content-Type': 'application/json'},
            body:data
        });
        result.then(function(response) {
            // console.log('response', response)
            let header=response.headers.get('Content-Type');
            console.log('header', header);
            if(header===null){throw "Проблема с откликом";}

           
            return response.text();
        }).then(function(text) {
          
            let result=JSON.parse(text);
            console.log(result);
            if(result.status==="ERROR") {throw result.errormessage;}
            resolve(result);
           
        }).catch(function(ex) {
            console.log('failed', ex);
            reject(ex);
        });
    });
}




А там добавоять токен в header
И везде из кода вызывать sendPostDataput
(Кстати если вы без redux работаете то "за##сь" следить за состоянием)
...
Рейтинг: 0 / 0
14.01.2019, 22:36
    #39759569
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Petro123Tsyklop,
Если вы не делали React hello world, то зачем всех запутали с авторизацией?
Кто с нее начинает?
забавно. Великий всезнающий диванный комментатор. Если вы так все за всех знаете кто с чего начинал и т.д. то и сидите на своем диване. Я не просил Вас так себя вести. Если же Вам впадлу привести ссылки на примеры о которых Вы так говорите то уж извините, но вы тут лишний. Мне больше Вам сказать нечего.
...
Рейтинг: 0 / 0
14.01.2019, 22:40
    #39759573
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
irbis_al, Ну я так и сделал, да. Отдельный класс, который отвечает за запросы. Хидер тоже стоит.

На счет редукса. Я понимаю что там все так круто. Но меня не прикалывает из ничего делать свалку из файлов в проекте (видел и пробовал что это такое). И как-то не хочется таким страдать.

Мне бы понять как бы мне бросить ивент на все приложение что надо сделать редирект на страницу авторизации, в случае если юзер оказался не авторизованным. Может подскажете? знаю вариант с прокидыванием некоего хендлера через все компоненты, но хотелось бы как-то элегантнее что ли сделать. Если такое возможно в рамках простого реакта.
...
Рейтинг: 0 / 0
14.01.2019, 23:04
    #39759579
irbis_al
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Tsyklopirbis_al, Ну я так и сделал, да. Отдельный класс, который отвечает за запросы. Хидер тоже стоит.

На счет редукса. Я понимаю что там все так круто. Но меня не прикалывает из ничего делать свалку из файлов в проекте (видел и пробовал что это такое). И как-то не хочется таким страдать.

Мне бы понять как бы мне бросить ивент на все приложение что надо сделать редирект на страницу авторизации, в случае если юзер оказался не авторизованным. Может подскажете? знаю вариант с прокидыванием некоего хендлера через все компоненты, но хотелось бы как-то элегантнее что ли сделать. Если такое возможно в рамках простого реакта.
Ну Ваш Back должен ответить что не авторизован
Вернуть пустую структуру ..а лучше типа
Код: javascript
1.
{user:null......}



И вот тут как раз если бы у Вас был redux ,то организовать можно было централизованно.(Ну почти)
А так надо после каждого вызова проверять типа
Код: javascript
1.
 if(response.user===null)  window.location.replace('/login'); 


(Или задействовать доп. библиотеки React для авторизации.)
Но если найдёте более элегантный способ,то выкладывайте сюда.
...
Рейтинг: 0 / 0
14.01.2019, 23:14
    #39759584
Petro123
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
TsyklopЕсли вы так все за всех знаете кто с чего начинал
я сужу исключительно по данному топику.
Спрашивать где тут подгружаются данные и глобальный объект на всё приложение не имеют никакого отношения к аутентификации.
Не нравится? Продолжайте. Работайте.
...
Рейтинг: 0 / 0
15.01.2019, 14:44
    #39759799
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
...не знаю, как в Реакте (но подозреваю, что примерно так же, как и во Vue, поскольку понятно, где курица, а где -яйцо), но и там, и там используется router, где при переходах по страницам (beforeEnter) (и соответственно, запросах) можно поставить что-то типа:

Код: javascript
1.
2.
3.
4.
5.
routes: [
    { path: '/', component: MailGrid, beforeEnter: requireAuth },
    { path: '/login', component: Login, beforeEnter: checkLogin },
    { path: '/detail', component: MailDetail }
  ]



... т.е. проверять, залогинен ли пользователь ....
...
Рейтинг: 0 / 0
15.01.2019, 15:16
    #39759820
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
carrotik, это да, но ведь это если переходить по ссылкам. А если оставаться на одной странице и при каком-то запросе, апи вернула что юзер не авторизован?
...
Рейтинг: 0 / 0
15.01.2019, 15:47
    #39759847
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Tsyklop,

..ну так API 401 возвращает же ..? .. вот в этом случае router.push('/login') .. но опять же, это удобнее делать через redux, я не знаю, почему вы так его не хотите, очень удобная конструкция ...
...
Рейтинг: 0 / 0
15.01.2019, 20:24
    #39759994
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
carrotik, не хочу как? через redux? или router.push?
...
Рейтинг: 0 / 0
16.01.2019, 13:32
    #39760260
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Получение данных о пользователе React
Tsyklopcarrotik, не хочу как? через redux? или router.push?

..через redux .. вы поймите, я ни чем не настаиваю, делайте, как вам удобнее, но вариантов всяких много ...
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Получение данных о пользователе React / 16 сообщений из 16, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]