0

前提・実現したいこと

Vue.jsとFirebaseでログイン機能を実装したいです。

新規登録画面で、v-modelでemailとpasswordそれぞれを結びつけ、作成したaxiosのインスタンスをimportして、axiosでエンドポイントにアクセスするregisterメソッドを定義、ボタンを押したらregisterメソッドを発火したいです。

成功すると、コンソールのObjectにデータが返ってくるはずなのですが、うまくいきません。よろしくお願いします。

エラーメッセージ

Error in v-on handler: "TypeError: _axios_for_auth_js__WEBPACK_IMPORTED_MODULE_0__.default.port is not a function"

試したこと

package.jsonのdevDependenciesにaxiosがなかったせいかなと思い、axiosをインストールしました。

補足情報(FW/ツールのバージョンなど)

"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-service": "^4.5.13",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.12"

該当のソースコード

Register.vue

<template>
  <div class="container">
  <h2>新規会員登録</h2>
  <form class="login-form">
    <div class="input-group">
      <label for="email">メールアドレス</label>
      <input type="email" id="email" v-model="email">
    </div>
    <div class="input-group">
      <label for="password">パスワード</label><
      <input type="password" id="password" v-model="password">
    </div>
    <div class="input-group">
      <button type="button" @click="register()">登録</button>
    </div>
  </form>
</div>
</template>

<script>
import axios from '../axios-for-auth.js';
export default {
  data() {
    return {
      email:"",
      password:""
    }
  },
  methods: {
    register() {
      axios.port(
            '/accounts:signInWithPassword?key=***************************',
            {
              email: this.email,
              password: this.password,
              returnSecureToken: true
            }
      ).then((response) => {
        console.log(response);
      });
      this.email = "";
      this.pasword = "";
    }
  }
}

</script>

axios-for-auth.js

import axios from 'axios';
const instance = axios.create({
  baseURL: 'https://identitytoolkit.googleapis.com/v1'
});

export default instance;

package.json

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "axios": "^0.21.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.12"
  },

1 件の回答 1

0

エラーメッセージから判断すると、portというものが関数ではないのに関数として呼ばれているようですね。

registerの中に axios.port(...) という呼び出しがありますが、これは正しくは axios.post(...) なのではないでしょうか?

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。