質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

受付中

【Vue3】res.headersの返り値の型を指定する方法について

yuito_syz
yuito_syz

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0回答

0評価

0クリップ

230閲覧

投稿2022/02/03 01:11

前提・実現したいこと

バックエンドはRails、フロントエンドはVueでポートフォリオを作成しています。
フロント側のログイン機能を実装中にエラーメッセージが発生しました。
自前で作成したAuthHeadersのデータ型(後術します)とaxios由来のAxiosResponseHeadesのデータ型が異なるのが原因だと予想しています。
AxiosResponseの返り値は原則anyになります(axios/index.d.ts at master · axios/axios, 130行目export interface AxiosResponse...を参照)
どのファイルでどのようなコードを書けばエラーが解消するか分からず困っています。また、この機能を実装するにあたって参考にした記事はこちらになります。

使用中の主な言語とフレームワークリンク
Vue3(vue-cli)https://cli.vuejs.org/
axioshttps://github.com/axios/axios
typescripthttps://www.typescriptlang.org/ja/
ファイル構成
src ┣ api ┃ ┣ auth.ts ┃ ┣ client.ts ┃ ┣ post.ts ┃ ┗ user.ts ┣ assets ┃ ┗ logo.png ┣ components ┃ ┣ AppPost.vue ┃ ┣ HelloWorld.vue ┃ ┗ NavBar.vue ┣ router ┃ ┣ authGuard.ts ┃ ┗ index.ts ┣ state ┃ ┣ global-state.ts ┃ ┗ use-state.ts ┣ types ┃ ┣ auth.ts ┃ ┣ current_otp.ts ┃ ┣ post.ts ┃ ┗ user.ts ┣ utils ┃ ┗ auth-data.ts ┣ views ┃ ┣ About.vue ┃ ┣ Account.vue ┃ ┣ Home.vue ┃ ┣ Login.vue ┃ ┣ NewPost.vue ┃ ┗ Post.vue ┣ App.vue ┣ main.ts ┗ shims-vue.d.ts

発生している問題・エラーメッセージ

型 'AxiosResponseHeaders' の引数を型 'AuthHeaders' のパラメーターに割り当てることはできません。 型 'AxiosResponseHeaders' には 型 'AuthHeaders' からの次のプロパティがありません: 'access-token', 'uid', 'client', 'expiry', 'Content-Type'ts(2345) (property) AxiosResponse<User, any>.headers: AxiosResponseHeaders

spa-front/src/api/auth.ts(後述します)
のLoginにおいてsetAuthDataFromResponse(res.headers)でエラーが発生しています。

typescript

export const login = async (email: string, password: string, otp_code: string) => { return await Client.post<User>('/auth/sign_in', { email, password, otp_code}) .then((res: AxiosResponse<User>) => { setAuthDataFromResponse(res.headers) //ここでエラーが発生 return res }) .catch((err: AxiosError) => { return err.response }) }

該当のソースコード

  • spa-front/src/api/auth.ts

typescript

import Client from '@/api/client' import { User } from '@/types/user' import { getAuthDataFromStorage, removeAuthDataFromStorage, setAuthDataFromResponse } from '@/utils/auth-data' import { AxiosResponse, AxiosError } from 'axios' export const login = async (email: string, password: string, otp_code: string) => { return await Client.post<User>('/auth/sign_in', { email, password, otp_code}) .then((res: AxiosResponse<User>) => { setAuthDataFromResponse(res.headers) return res }) .catch((err: AxiosError) => { return err.response }) } export const logout = async () => { return await Client.delete('/auth/sign_out', { headers: getAuthDataFromStorage() }) .then(() => { removeAuthDataFromStorage() }) } export const validateToken = async () => { return await Client.get('/auth/validate_token', { headers: getAuthDataFromStorage() }) .then((response) => { setAuthDataFromResponse(response.headers) return response.data }) }
  • spa-front/src/api/client.ts

ts

import axios from 'axios' export default axios.create({ baseURL: process.env.VUE_APP_API_BASE })
  • spa-front/src/types/user.ts

ts

export type User = { allow_password_change: boolean; email: string; id: string; image: string | null; nickname: string; provider: string; uid: string; otp_required_for_login: boolean; }
  • spa-front/src/utils/auth-data.ts

ts

import { AuthHeaders } from '@/types/auth' export const getAuthDataFromStorage = (): AuthHeaders => { return { 'access-token': localStorage.getItem('access-token'), 'client': localStorage.getItem('client'), 'expiry': localStorage.getItem('expiry'), 'uid': localStorage.getItem('uid'), 'Content-Type': 'application/json' } } export const setAuthDataFromResponse = (authData: AuthHeaders): void => { if (authData['access-token'] && authData['client'] && authData['uid'] && authData['expiry']) { localStorage.setItem('access-token', authData['access-token']) localStorage.setItem('client', authData['client']) localStorage.setItem('uid', authData['uid']) localStorage.setItem('expiry', authData['expiry']) } } export const removeAuthDataFromStorage = (): void => { localStorage.removeItem('access-token') localStorage.removeItem('client') localStorage.removeItem('uid') localStorage.removeItem('expiry') } export const getAuthDataFromStorageWithFormData = (): AuthHeaders => { return { 'access-token': localStorage.getItem('access-token'), client: localStorage.getItem('client'), expiry: localStorage.getItem('expiry'), uid: localStorage.getItem('uid'), 'Content-Type': 'multipart/form-data' } }
  • spa-front/src/types/auth.ts

ts

export type AuthHeaders = { 'access-token': string | null; 'uid': string | null; 'client': string | null; 'expiry': string | null; 'Content-Type': string; } export type AccessToken = Pick<AuthHeaders, 'access-token'>

試したこと&解決策候補

  • src/types/auth.tsやsrc/types/user.tsでデータ型を指定する 
  • src/utils/auth-data.tsにコードを追加する

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

$ npm list spa-front@0.1.0 ~/portfolio/spa-front ├── @chenfengyuan/vue-qrcode@2.0.0-rc.1 ├── @typescript-eslint/eslint-plugin@4.33.0 ├── @typescript-eslint/parser@4.33.0 ├── @vue/cli-plugin-babel@4.5.15 ├── @vue/cli-plugin-eslint@4.5.15 ├── @vue/cli-plugin-router@4.5.15 ├── @vue/cli-plugin-typescript@4.5.15 ├── @vue/cli-service@4.5.15 ├── @vue/compiler-sfc@3.2.29 ├── @vue/eslint-config-standard@5.1.2 ├── @vue/eslint-config-typescript@7.0.0 ├── autoprefixer@9.8.6 ├── axios@0.25.0 ├── core-js@3.20.3 ├── eslint-plugin-import@2.25.4 ├── eslint-plugin-node@11.1.0 ├── eslint-plugin-promise@4.3.1 ├── eslint-plugin-standard@4.1.0 ├── eslint-plugin-vue@7.20.0 ├── eslint@6.8.0 ├── postcss@7.0.35 ├── qrcode@1.5.0 ├── sass-loader@8.0.2 ├── sass@1.49.0 ├── tailwindcss@npm:@tailwindcss/postcss7-compat@2.0.3 ├── typescript@4.1.6 ├── vue-router@4.0.12 └── vue@3.2.29
  • package.json
{ "name": "spa-front", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1", "axios": "^0.25.0", "core-js": "^3.6.5", "qrcode": "^1.5.0", "vue": "^3.2.29", "vue-router": "^4.0.0-0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-standard": "^5.1.2", "@vue/eslint-config-typescript": "^7.0.0", "autoprefixer": "^9.8.6", "eslint": "^6.7.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^7.0.0", "postcss": "^7.0.35", "sass": "^1.26.5", "sass-loader": "^8.0.2", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3", "typescript": "~4.1.5" } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。