コンソールのエラー原因と解決方法がわかりません

Question

自分で調べてみましたが、コンソールのエラー原因と解決方法わからず困っています。
これはどういうエラーなんでしょうか？
このWebアプリはLaravelとVue.jsで開発されています。

サイトのURLは下記になります。
https://sumachira.jp/

コンソールのエラーは下記になります。

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
app.js:61052 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
/api/prefecture/list:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
app.js:711 Uncaught (in promise) Error: Request failed with status code 401
    at createError (app.js:711)
    at settle (app.js:972)
    at XMLHttpRequest.handleLoad (app.js:180)
smartphone-coupon.local/api/store/favorite:1 Failed to load resource: net::ERR_NAME_NOT_RESOLVED
app.js:68965 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
    at app.js:68965
app.js:50939 Uncaught (in promise) Error: Avoided redundant navigation to current location: "/".
    at createRouterError (app.js:50939)
    at createNavigationDuplicatedError (app.js:50912)
    at HTML5History.confirmTransition (app.js:51072)
    at HTML5History.transitionTo (app.js:51002)
    at HTML5History.push (app.js:51369)
    at app.js:51790
    at new Promise (<anonymous>)
    at VueRouter.push (app.js:51789)
    at VueComponent.onBtnClicked (app.js:3126)
    at invokeWithErrorHandling (app.js:53851)
DevTools failed to load SourceMap: Could not parse content for https://sumachira.jp/js/popper.js.map: Unexpected token < in JSON at position 0

/api/prefecture/list へのアクセスでエラーが出ているようでしたので、APIのルーティングの方を追記いたしました。
Laravelのバージョンは7.30.0になります。

/routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::group(['middleware' => 'auth:sanctum'], function(){
    /**
     * Prefecture API
    */

    Route::get('/prefecture/list','PrefectureController@show');

    /**
     * City API
    */

    Route::get('/city/{prefecture_id}/list','CityController@show');

    /**
     * Store API
    */
    // Store lookup
    Route::get('/store','StoreController@storeById');
    Route::get('/store/{city_id}/list','StoreController@show');
    Route::get('/store/nearby','StoreController@showNearByStore');
    // Product in store
    Route::get('/store/{store_id}/product','StoreController@showProduct');
    Route::get('/store/{store_id}/bargain-product','StoreController@showBargainProduct');
    Route::get('/store/{store_id}/coupon-product','StoreController@showCouponProduct');
    Route::get('/store/{store_id}/reserved-product','StoreController@showReservedProduct');
    Route::get('/store/{store_id}/product/{product_id}', 'StoreController@getProductDetail');
    // Favorite
    Route::get('/store/favorite','StoreController@showFavoriteStores');
    Route::post('/store/favorite/add','StoreController@addFavoriteStore');
    Route::delete('/store/favorite/remove','StoreController@removeFavoriteStore');
    // Reservation
    Route::post('/store/make-reservation','StoreController@makeReservation');
    Route::get('/store/{store_id}/reservation','StoreController@showBookingReservedProduct');
    /*
        shopping cart
    */
    Route::get('/store/shopping-cart','StoreController@showShoppingCartList');
    Route::post('/store/add-to-shopping-cart','StoreController@addToShoppingCartList');
    Route::post('/store/remove-from-shopping-cart','StoreController@removeFromShoppingCartList');

    /*
        Use Coupon
    */
    Route::get('/store/use-coupon','StoreController@showUseCouponList');
    Route::post('/store/add-to-use-coupon','StoreController@addToUseCoupon');
    Route::post('/store/remove-from-use-coupon','StoreController@removeFromUseCoupon');

    Route::post('/store/register_user/add','StoreController@addUserToStore');

});

Comments

[Lulucom]

/api/prefecture/list へのアクセスでエラーが出ているようですので以下も掲載された方が良いでしょう。
・APIのルーティング
・Laravelのバージョン

[jetstream]

ありがとうございます。
APIのルーティングの方を質問に追記いたしました。
Laravelのバージョンは7.30.0になります。

[Lulucom]

ありがとうございます。追記されるとteratailからのメール通知で気付けますので、こちらへのご返信は不要です。
エラーに出ている「401 (Unauthorized)」は認証エラーを意味していますが、認証がうまくいっていないという状況でしょうか。

[jetstream]

ありがとうございます。
APIアクセスにて、認証されていないことに起因するエラーが発生しているようです。
LINEログイン時に、システムの認証が正しく行われているかどうか、確認するにはどこを確認すれば（どのように処理を追っていけば）いいでしょうか？
他社が開発したアプリなのと、Laravelがあまりよくわかっていません。。

Answer 1

the server responded with a status of 401 (Unauthorized)

と出ています。ログインが必要なのではないでしょうか？

Comments

[jetstream]

ありがとうございます。
最初にLINEログインをしていて、ログインした後の画面でエラーが発生しています。
LINEログインの設定に問題があるのでしょうか・・・？

[gambaldia]

https://developers.line.biz/ja/docs/liff/

Vueでログインされましたか？
ブラウザのログインとフロントのJavaScript(Vue)とは別物です。上記参考になりますでしょうか。

[jetstream]

ありがとうございます。
こちらを参考にしてLINEログインを設定していました。
https://qiita.com/kuzira_vimmer/items/da31374a8733d5158d53
以下のサイトを参考にして設定をしたらいいのでしょうか？
https://qiita.com/h-takauma/items/f954a6c2a8ad9ee4396b

[jetstream]

すみません、合ってるかわからないのですが、作成済みのチャネルにLIFEを追加して、.env ファイルにLIFFのIDを追記しました。エラーは変わらず出ているようです。。

[gambaldia]

サーバーとクライアントとブラウザ上のフロントエンドとは別物なのです。
参考にされているサイトはPHP用でサーバー上での話です。
なのでVue(フロント）とは別次元です。
別のサンプルを探されたらどうでしょうか？