【Vue2】Vueで@submitについて学ぼう

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="username">ユーザー名:</label>
      <input type="text" id="username" v-model="username" />
      <span>{{ validateUsername() }}</span>

      <label for="password">パスワード:</label>
      <input type="password" id="password" v-model="password" />
      <span>{{ validatePassword() }}</span>

      <button type="submit">ログイン</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    validateUsername() {
      // ユーザー名が入力されているかを確認
      if (this.username.trim() === '') {
        return 'ユーザー名は必須です';
      }
      return ''; // エラーがない場合は空文字列を返す
    },
    validatePassword() {
      // パスワードが6文字以上であるかを確認
      if (this.password.length < 6) {
        return 'パスワードは6文字以上で入力してください';
      }
      return ''; // エラーがない場合は空文字列を返す
    },
    async handleSubmit() {
      if (!this.validateUsername() && !this.validatePassword()) {
        try {
          // サーバーにログインリクエストを送信
          const response = await axios.post('http://example.com/api/login', {
            username: this.username,
            password: this.password,
          });

          // サーバーからのレスポンスをコンソールに表示
          console.log('サーバーからのレスポンス:', response.data);

          // アクセストークンを取り出す
          const accessToken = response.data.accessToken;

          // 認証されたリクエストを行う
          const authenticatedResponse = await axios.get('http://example.com/api/protected-data', {
            headers: {
              Authorization: `Bearer ${accessToken}`, // アクセストークンをヘッダーに追加
            },
          });

          // 認証されたリクエストのレスポンスをコンソールに表示
          console.log('認証されたリクエストのレスポンス:', authenticatedResponse.data);

          // 他の処理を行う
        } catch (error) {
          // エラーが発生した場合の処理
          console.error('エラー:', error.message);
          window.alert('エラーが発生しました。詳細: ' + error.message);
        }
      } else {
        console.log('バリデーションエラーがあります。');
      }
    },
  },
};
</script>