少し調査した後、JWTは、そのコンパクトな性質と解析のしやすさから、ログイン認証に一般的に使用されています。私はJWTを使用することに決めました。しかし、私の質問は、これを私のreduxパラダイムにどのように組み込むかということです。サインアップフォームがあるとすると、ユーザーが自分の資格情報を入力して送信ボタンをクリックすると、アクションが呼び出され、JWTを作成するアクションが作成されます。これで、このアクションはアプリケーションのバックエンドに送られ、アプリケーションのバックエンドはJWT APIを呼び出しますか？それで、このアクションは非同期/ rpc呼び出しですか？また、ルーティングはどのように正確に行われますか？以前にreact-routerを使用しましたが、ボイラープレートを使用しています。私はこのWebアプリを最初から構築しているので、ルーティングを処理する場所と、サーバーから最初に取得したこのトークンを正確にどこに渡すのかについて少し混乱していますか？ユーザーがリクエストを行うたびにトークンが使用されますか？クライアントは、ユーザーの認証を維持するために、要求を行うたびにこのトークンをどのように認識しますか？
ユーザーが自分の資格情報（電子メール/パスワード）を送信すると、バックエンドはそれを初めて認証し、今回だけバックエンドがこれらの資格情報を使用します。認証時に、バックエンドはユーザー情報の一部（通常はユーザーIDのみ）を使用してJWTを作成します。これを行うには、JWTライブラリがたくさんあり、javascript用のjwt-decodeもあります。バックエンドはこのJWTで応答し、フロントエンドはlocalStorage.setItem('authToken', jwt)後続のすべてのリクエストに対してJWTを保存します（つまり）。
ユーザーは、Authorizationキーの下のリクエストヘッダーにJWTを使用してリクエストを送信します。何かのようなもの：
function buildHeaders() {
const token = localStorage.getItem('authToken')
return {
"Accept": "application/json",
"Content-Type": "application/json"
"Authorization": `${token}`
}
}
これで、バックエンドがJWTをデコードして認証します。有効なJWTの場合はリクエストが続行され、そうでない場合は拒否されます。
React-Routerを使用すると、このonEnter機能を使用して認証済みルートを保護できます。指定した関数は、必要なチェックを行います（JWTのlocalStorageをチェックし、現在のユーザーかどうかをチェックします）。通常、私はこれを行いました：
const _ensureAuthenticated = (nextState, replace) => {
const { dispatch } = store
const { session } = store.getState()
const { currentUser } = session
const token = localStorage.getItem("phoenixAuthToken")
if (!currentUser && token) { // if no user but token exist, still verify
dispatch(Actions.currentUser())
} else if (!token) { // if no token at all redirect to sign-in
replace({
pathname: "/sign-in",
state: { nextPathname: nextState.location.pathname}
})
}
}
この関数は、次のような任意のルートで使用できます。
<Route path="/secret-path" onEnter={_ensureAuthenticated} />
JWTの詳細についてはjwt.ioを、react-routerを使用した認証の詳細についてはreact- routerauth -flowの例を確認してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加