Блог

Работа над аутентификацией react-администратора с использованием токена JWT и сохранением в памяти в качестве переменной закрытия.

Создание authToken из Django работает нормально, он выдает токен с информацией о пользователе в формате JSON.

Вот inMemoryJWT Менеджер

Файл: inMemoryJwt.js

 // https://github.com/marmelab/ra-in-memory-jwt
const inMemoryJWTManager = () => {
    let inMemoryJWT = null;
    let isRefreshing = null;

    // Token code goes here
    const getToken = () => inMemoryJWT;

    const setToken = (token) => {
        inMemoryJWT = token;
        return true;
    };

    const ereaseToken = () => {
        inMemoryJWT = null;
        return true;
    }

    return {
        ereaseToken,
        getToken,
        setToken,
    }
};

export default inMemoryJWTManager();
 

Файл: AuthProvider.js

 oryJWTManager';

const authProvider = {
    login: ({ username, password }) => {
        const request = new Request('http://127.0.0.1:8000/api/token-auth/', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });

        return fetch(request)
            .then(response => {
                console.log('Response status '   response.status )
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                console.log('response.json is ');
                console.log(response.json());
                return response.json();
            })
            .then(({ token }) => {

                console.log(' about to set token in storage .......... ');
                JwtManager.setToken(token);
                const decodedToken = decodeJwt(token);

                # Its not setting in localstorage 
                localStorage.setItem('token', token);
                console.log('Token from lS : -------------',localStorage.getIdentity('token'));
                localStorage.setItem('permissions', decodedToken.permissions);
            })
            .then(auth => {
                localStorage.setItem('auth', JSON.stringify(auth));
            })
            .catch(response  => {
                console.log('Catch : ' );
                console.log(response.json());
                throw new Error('Network errorkkkkkkkkkkkkk')
            });
    },

    logout: () => {
        localStorage.setItem('not_authenticated', true);
        localStorage.removeItem('auth');
        localStorage.removeItem('role');
        localStorage.removeItem('login');
        localStorage.removeItem('user');
        localStorage.removeItem('avatar');

        inMemoryJWT.ereaseToken();
        return Promise.resolve();
    },

    checkError: ({ status }) => {
        if (status === 401 || status === 403) {
            inMemoryJWT.ereaseToken();
            return Promise.reject();
        }
        return Promise.resolve();

        //         return status === 401 || status === 403
        //             ? Promise.reject( { redirectTo: '/login' , logoutUser: false} )
        //             : Promise.resolve();
    },

    checkAuth: () => {

        return inMemoryJWT.getToken() ? Promise.resolve() : Promise.reject({ redirectTo: '/no-access',  message: 'login.required'  });

        //         localStorage.getItem('auth')
        //         ? Promise.resolve()
        //         : Promise.reject({ redirectTo: '/no-access',  message: 'login.required'  }),
    },
    getPermissions: () => {
        return inMemoryJWT.getToken() ? Promise.resolve() : Promise.reject();

        //         const role = localStorage.getItem('permissions');
        //         return role ? Promise.resolve(role) : Promise.reject();
    },

    getIdentity: () => {
        try {
            const { id, fullName, avatar } = JSON.parse(localStorage.getItem('auth'));
            return Promise.resolve({ id, fullName, avatar });
        } catch (error) {
            return Promise.reject(error);
        }
        // return {
        //     id: localStorage.getItem('login'),
        //     fullName: localStorage.getItem('user'),
        //     avatar: localStorage.getItem('avatar'),
        // };
    },


}


export default authProvider;
 

App.js

  const httpClient = (url, options = {}) => {
     if (!options.headers) {
         options.headers = new Headers({ Accept: 'application/json' });
     }
     const { token } = JSON.parse(localStorage.getItem('auth'));
     options.headers.set('Authorization', `Bearer ${token}`);
     return fetchUtils.fetchJson(url, options);
 };


const dataProvider = drfProvider('http://127.0.0.1:8000/api/token-auth/', httpClient);

const App = () => (  

    <Admin  title=""
            loginPage={Login}
            catchAll={NotFound}
            logoutButton={PfsLogoutButton}
            authProvider={authProvider}
            dataProvider={dataProvider} 
            catchAll={NotFound} 
            dashboard={Dashboard} disableTelemetry>
 

Проблема

Проблема, с которой я сталкиваюсь, заключается в том, что это не установка в памяти или локальном хранилище, также я получаю сообщение в нижнем колонтитуле при нажатии кнопки входа в систему. Я уже довольно долго ломаю над этим голову. Дайте мне знать, если вам понадобится какая-либо другая информация.

Ошибка, необходимая для входа на каждую страницу

HTTP-ответ отправляется сюда