Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Получение данных о пользователе React  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
Делаю приложение на ReactJS. Авторизацию сделал при помощи токенов (JWT). Когда пользователь входит в аккаунт, сервер отдает токены и данные юзера. Токены я сохраняю в localstorge-е. Но вот у меня возник вопрос. Сразу после авторизации данные пользователя есть. НО вот есть закрыть вкладку и открыть через какое-то время? данных о пользователе не будет, но будут токены. И вот сам вопрос. На каком этапе мне подгрузить данные пользователя, при этом проверив авторизован ли он (валидны ли токены).

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

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();


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

И вот на каком этапе мне подгружать данные?
14 янв 19, 20:16    [21785159]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Petro123
Member

Откуда: Загрузочный сектор Москвы (AutoPOI.ru)
Сообщений: 38643
Tsyklop,
Ты хочешь учить React без примеров React?
Бери в сети пример и делай.
Сервер на любой запрос от тебя проверит токен и отфутболит.
14 янв 19, 20:42    [21785179]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1533
Tsyklop,
данных о пользователе не будет, но будут токены.

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

storeUserData(data) {
        this._userData = new UserData(data);
//Тут надо добавить LocalStorage.store('userdata',data);
    };
14 янв 19, 20:55    [21785187]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
irbis_al,
ну как бы да. Можно зайти и что-то изменить в тех данных. Если что-то сделают в токене то их проблемы. Сервис выбросит на авторизацию.
14 янв 19, 21:08    [21785197]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
Petro123
Tsyklop,
Ты хочешь учить React без примеров React?
Бери в сети пример и делай.

Ну вот что-то не нашел я примеров. Может Вы скинете пару примеров?
Petro123
Сервер на любой запрос от тебя проверит токен и отфутболит.

ну, отфутболит. ок. Так что мне в каждом вызове апи копипастить код для проверки не реджектнул ли сервак запрос по причине неавторизации? я вот этого не пойму. Конечно можно сделать какое-то глобальное событие, на которое будут реагировать нужные компоненты, ну или в принципе приложение
14 янв 19, 21:11    [21785201]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Petro123
Member

Откуда: Загрузочный сектор Москвы (AutoPOI.ru)
Сообщений: 38643
Tsyklop,
Если вы не делали React hello world, то зачем всех запутали с авторизацией?
Кто с нее начинает?
14 янв 19, 21:37    [21785219]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1533
Tsyklop
е реджектнул ли сервак запрос по причине неавторизации? я вот этого не пойму. Конечно можно сделать какое-то глобальное событие, на которое будут реагировать нужные компоненты, ну или в принципе приложение


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

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 работаете то "за##сь" следить за состоянием)
14 янв 19, 21:45    [21785221]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
Petro123
Tsyklop,
Если вы не делали React hello world, то зачем всех запутали с авторизацией?
Кто с нее начинает?

забавно. Великий всезнающий диванный комментатор. Если вы так все за всех знаете кто с чего начинал и т.д. то и сидите на своем диване. Я не просил Вас так себя вести. Если же Вам впадлу привести ссылки на примеры о которых Вы так говорите то уж извините, но вы тут лишний. Мне больше Вам сказать нечего.
14 янв 19, 22:36    [21785246]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
irbis_al, Ну я так и сделал, да. Отдельный класс, который отвечает за запросы. Хидер тоже стоит.

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

Мне бы понять как бы мне бросить ивент на все приложение что надо сделать редирект на страницу авторизации, в случае если юзер оказался не авторизованным. Может подскажете? знаю вариант с прокидыванием некоего хендлера через все компоненты, но хотелось бы как-то элегантнее что ли сделать. Если такое возможно в рамках простого реакта.
14 янв 19, 22:40    [21785252]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1533
Tsyklop
irbis_al, Ну я так и сделал, да. Отдельный класс, который отвечает за запросы. Хидер тоже стоит.

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

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

Ну Ваш Back должен ответить что не авторизован
Вернуть пустую структуру ..а лучше типа
{user:null......}


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

(Или задействовать доп. библиотеки React для авторизации.)
Но если найдёте более элегантный способ,то выкладывайте сюда.
14 янв 19, 23:04    [21785263]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Petro123
Member

Откуда: Загрузочный сектор Москвы (AutoPOI.ru)
Сообщений: 38643
Tsyklop
Если вы так все за всех знаете кто с чего начинал

я сужу исключительно по данному топику.
Спрашивать где тут подгружаются данные и глобальный объект на всё приложение не имеют никакого отношения к аутентификации.
Не нравится? Продолжайте. Работайте.
14 янв 19, 23:14    [21785273]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
carrotik
Member

Откуда:
Сообщений: 1418
...не знаю, как в Реакте (но подозреваю, что примерно так же, как и во Vue, поскольку понятно, где курица, а где -яйцо), но и там, и там используется router, где при переходах по страницам (beforeEnter) (и соответственно, запросах) можно поставить что-то типа:

routes: [
    { path: '/', component: MailGrid, beforeEnter: requireAuth },
    { path: '/login', component: Login, beforeEnter: checkLogin },
    { path: '/detail', component: MailDetail }
  ]


... т.е. проверять, залогинен ли пользователь ....
15 янв 19, 14:44    [21785745]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
carrotik, это да, но ведь это если переходить по ссылкам. А если оставаться на одной странице и при каком-то запросе, апи вернула что юзер не авторизован?
15 янв 19, 15:16    [21785788]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
carrotik
Member

Откуда:
Сообщений: 1418
Tsyklop,

..ну так API 401 возвращает же ..? .. вот в этом случае router.push('/login') .. но опять же, это удобнее делать через redux, я не знаю, почему вы так его не хотите, очень удобная конструкция ...
15 янв 19, 15:47    [21785842]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
carrotik, не хочу как? через redux? или router.push?
15 янв 19, 20:24    [21786156]     Ответить | Цитировать Сообщить модератору
 Re: Получение данных о пользователе React  [new]
carrotik
Member

Откуда:
Сообщений: 1418
Tsyklop
carrotik, не хочу как? через redux? или router.push?


..через redux .. вы поймите, я ни чем не настаиваю, делайте, как вам удобнее, но вариантов всяких много ...
16 янв 19, 13:32    [21786686]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить