powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Получение данных о пользователе React
16 сообщений из 16, страница 1 из 1
Получение данных о пользователе React
    #39759533
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Делаю приложение на 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
Получение данных о пользователе React
    #39759539
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Tsyklop,
Ты хочешь учить React без примеров React?
Бери в сети пример и делай.
Сервер на любой запрос от тебя проверит токен и отфутболит.
...
Рейтинг: 0 / 0
Получение данных о пользователе React
    #39759543
irbis_al
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Tsyklop,
данных о пользователе не будет, но будут токены.

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

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

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

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

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

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



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


(Или задействовать доп. библиотеки React для авторизации.)
Но если найдёте более элегантный способ,то выкладывайте сюда.
...
Рейтинг: 0 / 0
Получение данных о пользователе React
    #39759584
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
TsyklopЕсли вы так все за всех знаете кто с чего начинал
я сужу исключительно по данному топику.
Спрашивать где тут подгружаются данные и глобальный объект на всё приложение не имеют никакого отношения к аутентификации.
Не нравится? Продолжайте. Работайте.
...
Рейтинг: 0 / 0
Получение данных о пользователе React
    #39759799
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...не знаю, как в Реакте (но подозреваю, что примерно так же, как и во 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
Получение данных о пользователе React
    #39759820
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
carrotik, это да, но ведь это если переходить по ссылкам. А если оставаться на одной странице и при каком-то запросе, апи вернула что юзер не авторизован?
...
Рейтинг: 0 / 0
Получение данных о пользователе React
    #39759847
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Tsyklop,

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

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


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