React/Redux/SagaアプリケーションでJWTを使用した一般的な認証処理に関して私が遭遇したほぼすべてのブログ投稿は、アクション/サガでローカルストレージのJWTを格納することと同じことを行います。
例えば:
例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);
}
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');
}
今-ローカルストレージにJWTを保存する-何が問題なのか-レデューサーではなく、アクションクリエーター/サガ内の状態の設定です
私の理解では、アクションクリエーター/サガは、使用するデータを決定するためにのみ使用する必要があり、データを実際に保存/保持するのはレデューサー次第です
もちろん-初期状態では、reduxはデータを保持しません。ただし、redux-persistなどのreduxミドルウェアを使用してローカルストレージに永続化することができます(他の場所にデータを永続化する他のredux-persistミドルウェアもあります)。ここでのポイントは-reduxは状態管理です
それでは、なぜ-認証に関しては、アプリケーションの状態としてreduxを使用することを避けているのでしょうか?
さまざまなソースから推測します。
したがって、他のロジックから遠く離れたところに認証をプッシュしようとします。コミュニケーションとモデルの間の層にそれを置きます。このレイヤーは非常に薄いため、このレイヤーは例に基づいて構築されたプログラムで予期しない方法で進化したり進化したりしない可能性があるため、例では追加のスペースを与えません。その上、そのユースケースを処理する場所は2つしかありません。
もう1つは、例では、完璧ではなく単純さを追求することです。
PS:このような答えは通常、より良い答えを導きます。幸運を!
私にとって、トークンをreduxストアではなくローカルストレージに保存する主な理由は、トークンが本質的に本質的に異なるためです。
それとは別に、アクションの作成者に状態を設定することは私には間違っているようです。なぜなら、それらの唯一の責任はアクションを返すことであるべきだからです。
ローカルストレージの設定は当然のことながら副作用であるため、論理的な場所は、選択した副作用ハンドラー(多くの場合、saga)内にあるようです。