O
owned139
Gast
Hallo zusammen,
ich code aktuell an einer React App und hänge an einer Stelle gedanklich etwas fest. Es geht hierbei um einen Userlogin und den Zugriff auf öffentliche und private API Endpunkte.
Hatte mir überlegt eine Auth-Komponente zu erstellen, welche sich um den User bzw. den Sessiontoken beim Login/Logout kümmert eine entspreche Rückmeldung liefert.
Die Komponente sieht wie folgt aus:
Nun hatte ich vor eine autarke Library zu erstellen, welche generell für API-Request zuständig ist. Als Beispiel habe ich mir das ungefähr so vorgstellt:
Nun habe ich folgende Probleme:
Wie handhabt man sowas?
ich code aktuell an einer React App und hänge an einer Stelle gedanklich etwas fest. Es geht hierbei um einen Userlogin und den Zugriff auf öffentliche und private API Endpunkte.
Hatte mir überlegt eine Auth-Komponente zu erstellen, welche sich um den User bzw. den Sessiontoken beim Login/Logout kümmert eine entspreche Rückmeldung liefert.
Die Komponente sieht wie folgt aus:
Javascript:
import React, { useContext, createContext, useState, useEffect } from 'react';
import axios from 'axios';
const AuthContext = createContext();
const requestLib = axios.create();
function useAuth () {
return useContext(AuthContext);
}
function ProvideAuth ({ children }) {
const auth = useProvideAuth();
return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
}
function withAuth (Component) {
return function WrapperComponent (props) {
const auth = useAuth();
return <Component auth={auth} {...props} />;
};
}
function useProvideAuth () {
const [ user, setUser ] = useState(null);
const [ accessToken, setAccessToken ] = useState(null);
const login = function (username, password) {
return new Promise((resolve, reject) => {
requestLib
.post(
'/login',
{ email: username, password: password },
)
.then(res => {
setUser({ username: res.data.username });
setAccessToken(res.data.accessToken);
resolve();
})
.catch(error => {
reject(error);
});
});
};
const logout = function () {
return new Promise((resolve, reject) => {
requestLib
.post('/logout')
.then(res => {
setUser(null);
setAccessToken(null);
resolve();
})
.catch(error => {
reject(error);
});
});
};
const isLoggedIn = function () {
return user !== null && accessToken !== null;
};
return {
user,
accessToken,
login,
logout,
isLoggedIn,
};
}
export { useAuth, withAuth, ProvideAuth };
Nun hatte ich vor eine autarke Library zu erstellen, welche generell für API-Request zuständig ist. Als Beispiel habe ich mir das ungefähr so vorgstellt:
Javascript:
import axios from 'axios';
const requestLib = axios.create();
const fetchUserList = () => {
return requestLib.get('/user-list');
};
export { fetchUserList };
Nun habe ich folgende Probleme:
- Wenn ein Request gesendet wird, dann benötigt dieser möglicherweise bei privaten Endpunkten den AccessToken, welcher aber nur in der Auth-Komponente vorhanden ist.
- Die Auth-Komponente bekommt bei einer Response nicht mit, wenn der Token verfällt
- Die Requests teilen sich auf 2 Libs/Komponenten auf und sind nicht zentral.
Wie handhabt man sowas?
Zuletzt bearbeitet von einem Moderator: