Где проверить срок действия токена и отправить запрос refre sh

Question

Я настроил реакцию-admin и использую его с компонентом HydraAdmin.
Мой запрос на вход возвращает JWT и токен refre sh. Я храню их в localStorage и хочу проверить, не истек ли срок действия JWT перед отправкой запросов.

Проблема в том, где я могу это сделать?
Я попробовал функцию checkAuth моего поставщика аутентификации, но он не вызывается перед каждой выборкой (например, POST).

Я хочу надежно обновить sh мой токен перед отправкой с запросом.
Или это неправильный способ иметь дело с этим?

Answer 1

Я решил это, добавив вызов функции refreshToken к каждой функции поставщика данных. Не уверен, что это правильный способ сделать это, но это сработало.

Моя функция для обновления sh токена:

function setAuth(auth) {
    localStorage.setItem('token', auth.token);
    localStorage.setItem('refreshToken', auth.refreshToken);
    authHeaders.set("Authorization", `Bearer ${auth.token}`);
}

function getRefreshToken() {
    return localStorage.getItem('refreshToken');
}

function getToken() {
    return localStorage.getItem('token');
}

function isLoggedIn() {
    return getToken() && getRefreshToken();
}

function isTokenExpired() {
    const decoded = jwt_decode(getToken());
    return decoded.exp < Date.now() / 1000 + 60 * 5;
}

function postRequest(route, body) {
    return fetch(new Request(url(config.server, route), {
        method: 'POST',
        body: JSON.stringify(body),
        headers: new Headers({ 'Content-Type': 'application/json' }),
    }));
}    

export async function refreshToken() {
    if (!isLoggedIn()) {
        return;
    }

    if (isTokenExpired()) {
        const response = await postRequest(config.auth.refresh_route, {refreshToken: getRefreshToken()});
        if (response.ok) {
            setAuth(await response.json());
        }
    }
}

Мой поставщик данных:

export const authHeaders = new Headers();
const fetch = (url, options = {}) => fetchHydra(url, {...options, headers: authHeaders });
const provider = hydraDataProvider(config.api, fetch);

class DataProvider {

    async introspect() {
        await refreshToken();
        return provider.introspect();
    }

    async getList (resource, params) {
        await refreshToken();
        return provider.getList(resource, params);
    }

    async getOne (resource, params) {
        await refreshToken();
        return provider.getOne(resource, params);
    }

    async getMany (resource, params) {
        await refreshToken();
        return provider.getMany(resource, params);
    }

    async getManyReference (resource, params) {
        await refreshToken();
        return provider.getManyReference(resource, params);
    }

    async create (resource, params) {
        await refreshToken();
        return provider.create(resource, params);
    }

    async update (resource, params) {
        await refreshToken();
        return provider.update(resource, params);
    }

    async updateMany (resource, params) {
        await refreshToken();
        return provider.updateMany(resource, params);
    }

    async delete (resource, params) {
        await refreshToken();
        return provider.delete(resource, params);
    }

    async deleteMany (resource, params) {
        await refreshToken();
        return provider.deleteMany(resource, params);
    }
}

export const dataProvider = new DataProvider();