Quasi tutti i post del blog che ho incontrato sulla gestione di auth generica che utilizza JWT in un'applicazione React / Redux / Saga fa la stessa cosa, ovvero archiviare il JWT nella memoria locale, in action / saga.
Ad esempio:
Esempio A (redux-saga) :
function* authorize({ payload: { login, password } }) {
const options = {
body: JSON.stringify({ login, password }),
method: 'POST',
headers: { 'Content-Type': 'application/json' }
};
try {
const { token } = yield call(fetchJSON, '/login', options);
yield put({ type: AUTH_SUCCESS, payload: token });
localStorage.setItem('token', token);
} catch (error) {
let message;
switch (error.status) {
case 500: message = 'Internal Server Error'; break;
case 401: message = 'Invalid credentials'; break;
default: message = 'Something went wrong';
}
yield put({ type: AUTH_FAILURE, payload: message });
localStorage.removeItem('token');
}
}
function* Saga() {
yield takeLatest(AUTH_REQUEST, authorize);
}
Esempio B ( redux):
function login(username, password) {
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
};
return fetch('${config.apiUrl}/users/authenticate', requestOptions)
.then(handleResponse)
.then(user => {
// login successful if there's a jwt token in the response
if (user.token) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('user', JSON.stringify(user));
}
return user;
});
}
function logout() {
// remove user from local storage to log user out
localStorage.removeItem('user');
}
Ora - archiviando i JWT nell'archivio locale a parte - ciò che mi preoccupa - è l'impostazione dello stato all'interno del creatore / saga dell'azione - piuttosto che in un riduttore.
La mia comprensione è che i creatori di azioni / sagas dovrebbero essere usati solo per determinare i dati da utilizzare - e spetta ai riduttori memorizzare / persistere i dati.
Ora ovviamente - al suo stato iniziale, il redux non persisterà i dati. Tuttavia, puoi usare un middleware redux come redux-persist per persisterlo nell'archiviazione locale (e ci sono altri middleware redux-persist per mantenere i dati in altri posti). Il punto qui è - redux è la gestione dello stato.
Perché allora - sembra che tutti stiano semplicemente scavalcando usando redux come stato della tua applicazione quando si tratta di autenticazione?