• Как правильно использовать интерцепторы в axios?

    owl1n
    @owl1n
    fullstack developer
    Покажу немного практик, как интерцепторы упрощают жизнь мне, да и многим, в целом.
    Здесь и далее покажу именно использование интерцепторов при работе с авторизацией по JWT (токены).

    1) Подстановка хедера авторизации

    const createSetAuthInterceptor = options => config => {
      if (options.access) {
        config.headers.Authorization = options.access;
      } else {
        delete config.headers.Authorization;
      }
      return config;
    };
    
    const setAuthCb = createSetAuthInterceptor(store.state.auth);
    axios.interceptors.request.use(setAuthCb);


    Здесь мы проверям наличие доступа из стора, а точнее, наличие токена. Далее, подставляем, либо удаляем заголовок.

    2) Следующая практика, это обновление токена (то, о чем вы спросили в комментарии, при окончании сессии и т.д.)

    let refreshTokenPromise;
    
    const createUpdateAuthInterceptor = (store, http) => async error => {
      const message = get(error, 'response.data.message');
      if (!['Token expired', 'Invalid token'].includes(message)) {
        return Promise.reject(error);
      }
    
      if (!refreshTokenPromise) {
        refreshTokenPromise = store.dispatch('refreshToken');
      }
    
      await refreshTokenPromise;
      refreshTokenPromise = null;
    
      return http(error.config);
    };
    
    const updateAuthCb = createUpdateAuthInterceptor(store, axios);
    axios.interceptors.response.use(null, updateAuthCb);


    Здесь мы можем видеть, что при каждом ответе проверяем наличие ошибок и если ошибка соответствует ошибке с токеном, то отправляем обновлять токен и далее снова отправляем тот же самый запрос, который к нам вернулся с ошибкой. Тут грамотно будет проверять не само сообщение об ошибке, а код ответа (401 и т.д.), но тут используется такое решение уже из за специфики бэка.

    В этом же решение, вместо обновления токена, можно отправлять юзера авторизовываться самому, на страницу авторизации. Для этого, конечно же, стоит передавать не экземпляр store, а экземляр роутера, чтобы редиректить юзера. Надеюсь, помог и хоть как то наглядно показал способы применения :)
    Ответ написан
    1 комментарий
  • С чего начать изучать game dev?

    @nrgian
    Если знаешь, как ты пишешь, языки, то сделай для начала парочку простых игр.
    Типа Змейки. Это очень просто https://dart.academy/web-games-with-dart-and-the-h...
    Потом перейди на Пэкмена, там логику преследователей писать будет непросто.
    И т.д.
    Ответ написан
    2 комментария
  • Как правильно написать авторизацию/аутентификацию?

    dasha_programmist
    @dasha_programmist
    ex Software Engineer at Reddit TS/React/GraphQL/Go
    Есть два варианта хранения данных об авторизованном пользователе:
    1) В куки (так по умолчанию используется в асп.нет): необходимые данные (claims) шифруются machineKey и отдаются пользователю в http-only куках, таким образом при каждом запросе на сервер они присылаются, расшифровываются и далее можно проверить в необходимых местах.
    плюсы: полностью stateless, нет надобности обращаться к БД
    минусы: при необходимости "выбить" сессию со стороны сервера нужно поднимать более сложную логику и хранить флаги в промежуточном хранилище (проверять что если для такого-то пользователя требуется завершить, то такие действия, иначе другие);
    2) Ключ сессии: после успешной аутентификации авторизуем пользователя и claims храним на сервере в быстрой памяти или БД (key-value), где ключ - ключ сессии, значение - любые данные.
    плюсы: есть полный контроль состоянием авторизации (как и возможность завершить сессию со стороны сервера, так и сменить пользователю роль(или другие параметры) "на лету")
    минусы: организация доп. прослойки - кэша или хранение в БД (медленно), при перезапуске/падении сервиса сессии клиентам потребуется перелогиниться.

    1
    1.1 В куки писать или ключ сессии или шифрованные данные о пользователе, сессия - абстрактное понятие (это пара: ключ и данные), ключ должен быть защищенным, т.е. трудным к копированию (хотя бы зрительно трудно запомнить), уникальным (чтобы не возникло коллизий: двум разным пользователям выдался один и тот же ключ, т.е. это не должна быть хэш-функция от логина-пароля или IP или чего-то неуникального).
    1.2 В асп.нет существуют атрибуты авторизации (в которых можно расставлять проверки на требование таковой, роль, конкретный пользователь), в общем смысле логика такова: поступил запрос на сервер, далее нужно посмотреть к какому ресурсу идёт обращение (защищенному или свободному), если ресурс защищен, то проверить куки (ключ сессии или шифрованные данные), расшифровать/получить данные о сессии из кэша и предпринять решение: пускаем или не пускаем (отдаём 401/403 или отдаем 200/404/...).
    1.3 Завести на сервере (в кэше или БД) словарь , при алгоритме проверки сессии добавить условие проверки на наличие записи в словаре.
    1.4 С нескольких - словаря не нужно.

    2
    2.1 Даже если пользователь входит через ВК всё равно нужно отдавать свои ключи сессий/шифрованные данные, а вот внутри данных уже хранить access_token от вк-шной сессии, так очень маленькая вероятность, что токен ВК утечет, а если утек ключ сессии, то действия будут ограничены только функционалом сайта.
    2.2 После расшифровки куки или данных по ключу сессии делать доп запрос на сервер ВК с токеном, который сохранился при аутентификации (access_token), запрос простой, например получить имя пользователя, если ВК выдал что токен просрочен или ошибку, то сессию закрывать или куки с данными обнулять.
    Ответ написан
    3 комментария
  • Как выгодно себя продать на рынке труда?

    DevMan
    @DevMan
    да нет таких советов и быть не может: каждый человек индивидуален и как человек, и как специалист. и работодатели тоже все не как под копирку.
    кто–то слишком наглый, кто–то слишком робкий. и каждый сам находит свой баланс между этими качествами.
    можно без устали штудировать материалы "как пройти собеседование по ...", но как только собеседование пойдет иначе (а оно обязательно пойдет), все вылетит в трубу.

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

    грамотные люди не охотятся за конкретными знаниями, они охотятся за мозгами в целом и адекватностью в частности. ваше дело – продемонстрировать обладание этими качествами.
    Ответ написан
    Комментировать
  • А какая архитектура reactjs/redux приложения у вас?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Есть два хороших подхода к организации кодовой базы, которые подходят для большинства проектов: File Type First и Feature First:

    Пример Feature First

    Проект:
    /common
      /api
      /components
      /ducks
      /entities
      /sagas
      /selectors
      /utils
    /features
      /Feature1
      /Feature2
      /Feature3
      /Feature4
      ...
      /FeatureN
    /Main
      /pages
      index.js
      App.js
      routes.js
      rootReducer.js
      rootSaga.js
      store.js
    /Auth
      /pages
      index.js
      App.js
      routes.js
      rootReducer.js
      rootSaga.js
      store.js
    ...

    Отдельно взятая Feature:
    /features
      /Accounts
        /components
        index.js
        accountsDucks.js
        accountsSaga.js
        accountsSelectors.js
        accountsApi.js
        Accounts.js
        AccountsContainer.js

     
    Пример File Type First
    /actions
    /common
    /components
      /core
      /Feed
      /Profile
      ...
    /constraints
    /containers
    /entries
    /locales
    /pages
    /reducers
    /utils
    ...


    Оба подхода при умелом использовании они отлично масштабируются, поддерживаются и не вызывают проблем при рефакторинге.

    Дата мапперы в зависимости от задач можно использовать в редьюсерах, в mapStateToProps и asyncActions. Главное чтобы по проекту все было стандартизировано.
    В mapStateToProps пишут преобразования необходимые лишь для одного компонента.

    Большое количество бойлерплейта это плата которую вы платите за использование redux. Можно писать все константы и редьюсеры руками, можно использовать библиотеки вроде redux-actions и ей подобные. В первом случае вы получаете плюс к гибкости, читаемости и статическому анализу, во втором меньше кода. Я в большинстве проектов предпочитаю первый вариант. Так же создаю шаблоны файлов в Webstorm для asyncActions, contstraints, редьюсера, страницы, компонента и законнекченого компонента.
    В специфичных проектах с множеством CRUD запросов и похожих сущностей есть смысл написать CRUD Boilerpalte.
    Ответ написан
    Комментировать
  • А какая архитектура reactjs/redux приложения у вас?

    SaymonA
    @SaymonA Автор вопроса
    Нет универсального подхода.
    Структурировать проект нужно так как удобно лично Вам.

    Но что бы понять как это "удобно" и при этом не запороть проект я придерживаюсь некоторых идей, описанных в статьях:
    Первая
    Вторая

    В итоге получается что то похожее на ответ nakree.
    Несколько месяцев ушло что бы прийти к такой архитектуре.
    Ответ написан
    Комментировать
  • С чего начать учить React?

    Krasnodar_etc
    @Krasnodar_etc
    fundraiseup
    У них же просто охренительный официальный туториал
    Ответ написан
    1 комментарий
  • Как найти ментора/наставника или удаленную работу для начинающего фронтенд разработчика?

    nakree
    @nakree
    Fullstack Developer
    Это вопрос или резюме типичного демпингирующего вайтишника?

    Удаленную работу без реального опыта - никак.
    Фриланс без реального опыта - пополнение рядов желающих конкурировать в неоплачиваемом рабстве и без перспектив развития.
    Ментора - через хороших друзей\знакомых, которым больше нечем заняться. Ну, еще вариант - оплатить чужой труд.

    Выход - устроится на фирму, а лучше на возможную стажировку.
    Ответ написан
    1 комментарий
  • Как увеличить скорости работы продуктов JetBrains?

    firexonix
    @firexonix
    Обычно такие проблемы возникают, когда машине выделено мало памяти, которая естественным образом сжирается через некоторое время. Для того, чтобы проверить, так ли это, сделайте:
    1. Перейдите во вкладку Settings->Appearance
    2. Отметьте галочкой пункт Show Memory Indicator
    3. В правом нижнем углу должен появиться такой значок: caafb12a8b904f0f8f5b1dd5b13dedcf.png
    4. Проверьте его значение, когда начнутся тормоза и кликните на него, чтобы запустить сборщик мусора


    Если тормоза после этого исчезли, то делаем следущее:
    1. Находим файл настроек JVM в директории с исполняемым файлом вида <имя_продукта><разрядность>.vmoptions
    2. Добавляем (изменяем) следующие пункты:


    -Xms128m
    -Xmx2048m
    -XX:ReservedCodeCacheSize=64m
    -XX:+UseCodeCacheFlushing
    -XX:+UseCompressedOops

    Xms - минимальный раздел используемой RAM для кучи
    Xmx - максимальный раздел используемой RAM для кучи

    Остальные параметры используются для различных оптимизаций и, чтобы не перевирать, отправляю к первоисточникам.

    https://blog.codecentric.de/en/2012/07/useful-jvm-...
    habrahabr.ru/post/160049

    P.S.
    И да, использвание SSD в больших проектах - единественное решение для быстрой индексации.
    Ответ написан
    Комментировать
  • Как показывать при загрузке страницы 1 из нескольких блоков?

    @Nwton
    html
    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    <ul>


    css
    li{
    	display: none;
    }


    javascript
    window.onload = function(){
    	show();
    }
    
    function show(){
    	var list = document.getElementsByTagName('li');
    	list[rand(0, list.length - 1)].style.display = 'block';
    }
    
    function rand(min, max){
    	return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    Ответ написан
    Комментировать
  • Как поднять себе зарплату?

    @Dadilo
    Если речь о квалификации в пределах твоих должностных обязанностей, то просто подходишь к руководству и говоришь о своем желании.

    Руководство прикидывает - а стоит ли твоя квалификация и выполняемые обязанности повышения или дешевле другого найти.

    Если ты действительно стОящий специалист - получишь повышение.

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

    Бояться нечего. Даже если откажут ничего с тобой плохого не случится - все вернется на круги своя.

    Другое дело, если ты перерос свои должностные обязанности. Тут тоже можно поговорить, чтобы тебе давали более сложную работу и больше денег платили, разумеется.

    Если у фирмы нет более сложной работы для тебя (а ты ее можешь и хочешь сложную работу выполнять) - то вот только тут и повод, чтобы уйти в другое место.

    Очень многие вещи можно решить простым вежливым спокойным разговором.

    Весь бизнес на этом строится. Бизнесмены только и делают целыми днями, что разговаривают. Поговори с директором - для него разговоры это обычная часть работы.
    Ответ написан
    Комментировать
  • Где искать красивые шаблоны интернет-магазинов?

    sevasargsyan
    @sevasargsyan
    Веб разработчик
    Когда то собрал эти ссылки может помогут
    PSD HTML CMS Шаблоны www.enfusionthemes.com www.mafiashare.net
    HTML PSD PHOTOSHOP followdesign.com
    Zoom эффект\галерея www.starplugins.com
    Шаблоны chocotemplates.com css-free-templates.com
    Флешь шаблоны www.flashmo.com
    Шаблоны бесплатно www.websitetemplatesonline.com
    Templatemonster blog.templatemonster.com/free-website-templates
    PSD шаблоны all-psd.ru
    Полезные разработки efimov.ws followdesign.com
    Фото для фона patterns.ava7.com
    Различные меню\всп окно\ и т.д. webscript.my1.ru
    Ответ написан
    2 комментария
  • Как сделать вертикальный слайдер новостей?

    mr_dev1l
    @mr_dev1l
    Технический верстальщик
    bxslider, mode:'vertical'
    Ответ написан
    Комментировать
  • Как сделать вертикальный слайдер новостей?

    sergski
    @sergski
    web-developer
    Посмотрите www.idangero.us/swiper/demos в api есть все что угодно для кастомных настроек
    Ответ написан
    Комментировать
  • Как сделать вертикальный слайдер новостей?

    @Wheelie
    контейнеру двигаете top, кнопками , вот и весь слайдер
    Ответ написан
    Комментировать
  • Как сделать активным пункт меню?

    @annasemenova
    $(function(){
      $('.menu ul li a').each(function(){
        if(document.location.pathname == $(this).attr('href')){
          $(this).parent().addClass('active');
       }
      });
    });


    <div class="menu>
    <ul>
        <li><a>Первый пункт</a></li>
            <ul>
                <li><a>Первый пункт</a></li>
                <li><a>Второй пункт</a></li>
            </ul>
        <li><a>Второй пункт</a></li>
    </ul>
    </div>
    Ответ написан
    1 комментарий
  • Верстка под IE8, что использовать при работе с html5 и css3?

    GoodProject
    @GoodProject
    Верстальщик
    Может быть это:
    Respond.js
    А может ещё и вот это:
    Modernizr
    Ответ написан
    Комментировать