Squeak.ru - шаблоны программирования

localstorage сделать заметку, обновить JWT Reactjs

Это системный поток:

  • Я вхожу в систему и сохраняю пользовательские данные в localstorage.
  • У меня есть компонент, который читает localStorage для получения пользовательских данных, например JWT.

Проблема в том, что когда я выполняю новый вход в систему, localStorage не обновляется новыми данными, и поэтому я не могу создавать заявки, использующие новые данные пользователя localStorage.
Я обнаружил, что если я обновляю страницу вручную, localStorage обновлен.
В reactjs я использую response-router-dom для навигации по страницам.

Как я могу получить новые данные для входа в систему для обновления localStorage?

//login
api.post('users/login', {email, password})//make log in
.then(res => {
        localStorage.removeItem('user_info');// I remove the ond data from localStorage
        if(res){//If api do the post
            let data = JSON.stringify(res.data.data)
            localStorage.setItem('user_info', data);//Save new data in localStorage
            history.push('/');//Go the homepage
        }
    }).catch(error => {
        this.setState({ noAuth: true })
        console.log('error');
    });

Компонент, который получил пользовательские данные в localStorage:

import axios from "axios";
import { isAuthenticated } from '../../components/Util/Auth';
export const token = 'Z31XC52XC4';

// var user_info = JSON.parse(localStorage.getItem('user_info'));
// var auth_token = user_info.auth_token;
// console.log(isAuthenticated);
if (isAuthenticated()) {
    var user_info = JSON.parse(localStorage.getItem('user_info'));
    var auth_token = user_info.auth_token;
}


const api = axios.create({
    // baseURL: 'https://url-from/api/', //PRODUÇÃO
    baseURL: 'https://url-from/api/', //DESENVOLVIMENTO
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Access-Origin': 'D',
        'Authorization': `Bearer ${auth_token}`,
        'Company-Token': `${token}`
    }
});
// console.log(user_info);

api.interceptors.request.use(
    config => {
        console.log(config.headers);
        console.log(user_info);
        const newConf = {
            ...config,
            headers: {
                ...config.headers,
                'Authorization': `Bearer ${auth_token}`,
            }
        }
        // return newConf;
    },
    error => Promise.reject(error)
)

export default api;


  • Вы можете вкратце объяснить, в чем проблема? потому что в соответствии с кодом он устанавливает новый элемент 02.09.2019
  • Да, код устанавливает новый элемент, но новые данные не сохраняются, пока я не обновлю страницу. Это как если бы старые данные оставались в localStorage до обновления страницы. Проблема в том, что response-router-dom не обновляется при навигации по странице. 02.09.2019
  • Пожалуйста, добавьте свой компонент React, который не вызывает рендеринг, кажется, что реквизиты не устанавливаются правильно, на мой взгляд. 02.09.2019
  • Означает ли новый вход в систему выход и затем вход? 02.09.2019
  • 1. Вы уверены, что res не пуст? 2. Вы уверены, что res.data.data - это именно то, что вам нужно хранить? Я спрашиваю, потому что он определенно удаляет старый user_info из хранилища, но я не уверен, не записываете ли вы обратно неопределенное значение. 02.09.2019
  • Я предполагаю, что проблема в вашем маршрутизаторе в основном с history.push, а не с локальным хранилищем 02.09.2019
  • Я обновил вопрос с помощью компонента, который получает данные пользователя из localStorage 02.09.2019
  • Вы уверены, что isAuthenticated() возвращает истинное значение? 02.09.2019
  • Я думаю, что проблема в обновлении компонента, потому что, когда я вручную обновляю страницу из браузера, данные localStorage обновляются. 02.09.2019

Ответы:


1

Когда вы создаете экземпляр Axios, вы передаете "статическое" значение.

        'Authorization': `Bearer ${auth_token}`,

если это значение не существует, оно становится

        'Authorization': `Bearer undefined`,

Чтобы исправить это, вам нужно добавить перехватчик в axios, чтобы обновлять значение этого токена при КАЖДОМ запросе, а не только при создании экземпляра.

api.interceptors.request.use(
  config => {
    const user_info = JSON.parse(localStorage.getItem('user_info'));
    const newConf = { 
      ...config, 
      headers: {
        ...config.headers, 
        'Authorization': `Bearer ${user_info.auth_token}`,
     } 
    }
  },
  error => Promise.reject(error)
)
02.09.2019
  • Я не могу использовать перехватчики, я редактирую вопрос, но получаю сообщение об ошибке: Uncaught (в обещании) TypeError: невозможно прочитать свойство cancelToken из undefined 02.09.2019

  • 2

    Я могу сделать это с помощью подсказки моего друга JCQuintas

    import axios from "axios";
    import { isAuthenticated } from '../../components/Util/Auth';
    export const token = 'Z31XC52XC4';
    
    const api = axios.create({
        // baseURL: 'https://url-from/api/', //PRODUÇÃO
        baseURL: 'https://url-from/api/', //DESENVOLVIMENTO
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Access-Origin': 'D',
            // 'Authorization': `Bearer ${auth_token}`,
            'Company-Token': `${token}`
        }
    });
    
    api.interceptors.request.use(function (config) {
        console.log(config);
        if (isAuthenticated()) {
            var user_info = JSON.parse(localStorage.getItem('user_info'));
            var auth_token = user_info.auth_token;
        }
        config.headers.Authorization =  `Bearer ${auth_token}`;
    
        return config;
    });
    
    export default api;

    02.09.2019
    Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...