0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【ArticleHub Project ノート】02.Loginページの開発

Last updated at Posted at 2024-11-24

baseURL設定

目標:認証コードでのログインを実現し、バックエンドで認証コードをデフォルトで「246810」に設定する。

理由:SMSインターフェースは無料ではないため、攻撃者による悪意ある利用を防ぐ。

手順

  1. utils/request.js にて axios のリクエスト基準アドレス(baseURL)を設定する。

    目的:共通のプレフィックスアドレスを抽出し、設定後は axios リクエスト時に常に baseURL + url となる。

  2. 電話番号と認証コードのデータを収集する。

  3. axios を使用して認証コードログインAPIを呼び出す。

  4. Bootstrap の Alert 警告フレームを使用して結果をユーザーにフィードバックする。

image.png


token設定

概念:アクセス権限のトークンで、本質的には一連の文字列。

作成:ログインが正しく行われた後、バックエンドがトークンを発行して返す。

目的:ログイン状態などを判断し、アクセス権限を制御する。

注意点:フロントエンドではトークンの有無しか判断できず、有効性はバックエンドが判断する。

使用方法

  1. utils/auth.js でトークン文字列がない場合、強制的にログインページにリダイレクトする(アドレスバーを手動で変更してテスト)。

  2. ログイン成功後、トークン文字列をローカルに保存し、ホームページにリダイレクトする(アドレスバーを手動で変更してテスト)。

image.png


axios インターセプター

要件:ユーザー名を設定する。

構文axiosheaders オプションでリクエストヘッダーのパラメーターを渡せる。

問題:多くのAPIでトークン文字列を持たせる必要がある。

解決:リクエストインターセプターで共通の headers オプションを一括設定する。

axios リクエストインターセプター:リクエストを送信する前に発動する設定関数で、リクエストパラメーターを追加で設定する。

image.png


axios レスポンスインターセプター:レスポンスが then/catch に到達する前に発動するインターセプション関数で、レスポンス結果を一括で処理する。

例えば:認証失敗の場合、一括判断して処理を行う。

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?