baseURL設定
目標:認証コードでのログインを実現し、バックエンドで認証コードをデフォルトで「246810」に設定する。
理由:SMSインターフェースは無料ではないため、攻撃者による悪意ある利用を防ぐ。
手順:
-
utils/request.js
にてaxios
のリクエスト基準アドレス(baseURL)を設定する。目的:共通のプレフィックスアドレスを抽出し、設定後は
axios
リクエスト時に常にbaseURL + url
となる。 -
電話番号と認証コードのデータを収集する。
-
axios
を使用して認証コードログインAPIを呼び出す。 -
Bootstrap の Alert 警告フレームを使用して結果をユーザーにフィードバックする。
token設定
概念:アクセス権限のトークンで、本質的には一連の文字列。
作成:ログインが正しく行われた後、バックエンドがトークンを発行して返す。
目的:ログイン状態などを判断し、アクセス権限を制御する。
注意点:フロントエンドではトークンの有無しか判断できず、有効性はバックエンドが判断する。
使用方法:
-
utils/auth.js
でトークン文字列がない場合、強制的にログインページにリダイレクトする(アドレスバーを手動で変更してテスト)。 -
ログイン成功後、トークン文字列をローカルに保存し、ホームページにリダイレクトする(アドレスバーを手動で変更してテスト)。
axios インターセプター
要件:ユーザー名を設定する。
構文:axios
の headers
オプションでリクエストヘッダーのパラメーターを渡せる。
問題:多くのAPIでトークン文字列を持たせる必要がある。
解決:リクエストインターセプターで共通の headers
オプションを一括設定する。
axios リクエストインターセプター:リクエストを送信する前に発動する設定関数で、リクエストパラメーターを追加で設定する。
axios レスポンスインターセプター:レスポンスが then
/catch
に到達する前に発動するインターセプション関数で、レスポンス結果を一括で処理する。
例えば:認証失敗の場合、一括判断して処理を行う。