[Vue.js]Request failed with status code 401が解消できません[Nuxt.js]

Question

Nuxt.js初学者で技術書を見つつアプリ開発をしているものなのですが

 Request failed with status code 401

というコマンドが出てローカルでアプリが開かなくなってしまいました。

発生しているエラー

 ERROR  Request failed with status code 401                                                                   14:56:17

  at createError (node_modules\axios\lib\core\createError.js:16:15)
  at settle (node_modules\axios\lib\core\settle.js:17:12)
  at IncomingMessage.handleStreamEnd (node_modules\axios\lib\adapters\http.js:244:11)
  at IncomingMessage.emit (events.js:327:22)
  at IncomingMessage.EventEmitter.emit (domain.js:486:12)
  at endReadableNT (_stream_readable.js:1327:12)
  at processTicksAndRejections (internal/process/task_queues.js:80:21)

上記がエラーコード全文なのですが何が原因のどういうエラーなのかもわからないという状況です

また、ブラウザには

node_modules\axios\lib\core\createError.js

 * @param {Object} [request] The request.
 * @param {Object} [response] The response.
 * @returns {Error} The created error.
 */
module.exports = function createError(message, config, code, request, response) {
  var error = new Error(message);（この行だけグレーの背景色がついています）
  return enhanceError(error, config, code, request, response);
};

というようなエラー文が出ています。

またChromeの検証機能でエラー元を探ったところ

Failed to load resource: the server responded with a status of 500 (RuntimeError)

というエラーが出ている状況です。

試してみたこと

このエラーについて調べてみたところAPIエラーという記事やasyncDataがおかしいというような記事を目にしたのでどこがおかしいかを調べるためサンプルコードと比較してみたのですが特におかしいところは見当たりませんでした。

また、サーバーに問題があるという記事を見かけfirebaseで新しいプロジェクトを作りそこでアプリを開こうとしましたが開けず、サーバーを再起動したら解消されたという記事があったのでサーバーを再起動してみましたがそれでも解決せずという状況です。

この問題の解決方法に心当たりのある方がいらっしゃいましたらアドバイスの方よろしくお願いいたします。

追記（質問に対する回答）

下記のコードにもある通りaxiosを使ったリクエスト送信を自分で実装していて、そのリクエスト先が認証が必要となっています。

**app/store/index.js**


export const actions = {
  async login({ commit }, { id }) {
    if (id.match(/_|@|./)) {
      throw new TypeError('invalid username')
    }
    const user = await this.$axios.$get(`/users/${id}.json`)
    console.log(user)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },
  async register({ commit }, { id }) {
    const payload = {}
    payload[id] = { id }
    await this.$axios.$patch(`/users.json`, payload)
    const user = await this.$axios.$get(`/users/${id}.json`)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },
  async addLikeLogToUser({ commit }, { user, post }) {
    user.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  }
}

追記

ログイン機能は以下の通り実装しております

**app/store/index.js**

export const state = () => ({
  isLoggedIn: false,
  user: null
})

export const getters = {
  isLoggedIn: state => state.isLoggedIn,
  user: state => (state.user ? Object.assign({ likes: [] }, state.user) : null)
}

export const mutations = {
  setUser(state, { user }) {
    if (user.id.match(/_|@|./)) {
      throw new TypeError('invalid username')
    }
    state.user = user
    state.isLoggedIn = true
  },
  updateUser(state, { user }) {
    state.user = user
  }
}

export const actions = {
  async login({ commit }, { id }) {
    if (id.match(/_|@|./)) {
      throw new TypeError('invalid username')
    }
    const user = await this.$axios.$get(`/users/${id}.json`)
    console.log(user)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },
  async register({ commit }, { id }) {
    const payload = {}
    payload[id] = { id }
    await this.$axios.$patch(`/users.json`, payload)
    const user = await this.$axios.$get(`/users/${id}.json`)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },

Answer 1

firebaseの有効期限が切れていたため新しいプロジェクトを作成しそれとアプリを繋いだら解消されました。

Answer 2

HTTPの401エラーが発生しているのではないでしょうか。

Nuxt.jsに詳しくないのですが、axiosを使ったリクエスト送信を自分で実装しているのであれば、そのリクエスト先が「認証が必要となっているか」確認してみてください。
また、その結果について追記頂けると助かります。

Comments

[jime1234567]

ご回答いただきありがとうございます。

追記させていただいた通りaxiosを使ったリクエスト送信を実装していて、そのリクエスト先は認証（ユーザーID）が必要となっています。

[plasticgrammer]

認証とは基本認証でしょうか？
基本認証なら、以下のようにauthパラメータを使用すればよさそうです。

axios.post(session_url, {}, {
auth: {
username: 'user',
password: 'pass'
}
})

https://stackoverflow.com/questions/52456800/401-http-error-on-basic-auth-get-request-from-axios-to-api

[jime1234567]

ログイン機能はstore/index.jsで
export const mutations = {
setUser(state, { user }) {
if (user.id.match(/_|@|./)) {
throw new TypeError('invalid username')
}
state.user = user
state.isLoggedIn = true
},
updateUser(state, { user }) {
state.user = user
}
}

export const actions = {
async login({ commit }, { id }) {
if (id.match(/_|@|./)) {
throw new TypeError('invalid username')
}
const user = await this.$axios.$get(`/users/${id}.json`)
console.log(user)
if (!user.id) throw new Error('Invalid user')
commit('setUser', { user })
},

このように実装しているのですがそれとは別にauthパラメータ必要ということでしょうか？

[plasticgrammer]

回答ではありませんが追加で確認させてください。

現在エラーが発生しているのは、状況login関数の実行時という理解で正しいでしょうか？
正しいとした場合、getでアクセスしようとしているURL(http:// ... /users/${id}.json)を直接ブラウザに入力してアクセスした際、ユーザーとパスワードの入力を求められる状況でしょうか？

[jime1234567]

login関数の実行時ではないと思われます（トップページがログインページとなっており、そのページが呼び出せていないので）。
そもそもアプリが開けず（トップページへ行けず）ユーザー登録ができないという状況です。

[plasticgrammer]

再度の質問になりますが、
getでアクセスしようとしているURL(http:// ... /users/${id}.json)を直接ブラウザに入力してアクセスした際、ユーザーとパスワードの入力を求められる状況でしょうか？

[jime1234567]

Cannot read property 'id' of undefinedのエラーが面が出てくるだけでユーザーとパスワードの入力を求められる状況ではありません

[plasticgrammer]

私自身勘違いしていたようですが、現在の状況としては
ブラウザからアクション → /users/${id}.jsonへリクエスト送信 → サーバー側から更にどこかへリクエスト？（Request failed with status code 401） → サーバーの実行時エラー（server responded with a status of 500）としてレスポンス
という理解なのですが、正しいでしょうか。

正しいとすると、/users/${id}.jsonへアクセスした際に実行されるロジック側に問題があるのだと思いますが、何かソース等ありますでしょうか。

[jime1234567]

サーバーにfirebaseを使っていたのですが、firebaseの有効期限が切れていたようでfirebase内で新しいプロジェクトを作成しそのプロジェクトにつないだところ解消されました。

お手数をおかけいたしました。