Laravel axiosとvueを使用して保護されたルートにデータを投稿する方法

Question

これまで私のLaravelアプリはモバイルアプリのバックエンドAPIとしてのみ使用していました。ユーザーがログインして、デバイスに保存されているトークンを取得すると、デバイスはバックエンドAPIに対する各リクエストでその基本的なhttpトークンを使用します。

今、私は自分のアプリのWebベースのバージョンを構築しています。私はaxiosとvueを使って私のページにPOSTアップデートを送ってみたいが、私のルートはauthで保護されているので、どうすればいいのか分からない。

<meta name="token" id="token" value="{{ auth()->check() ? auth()->user()->api_token : null }}"> 

私のコンポーネントは、私が送信したときに、私のユーザーが後でaxsiosで使用することができapi_token取得します。この方法：私はこの？：

<your-component :auth_user="{{auth()->user()->api_token}}"></your-component> 

それとも単にメタを作成するような何かを

を行う必要があります基本的なhttp認証を使用する投稿要求。

または、Axiosを使用して保護されたAPIと通話する一般的な方法は何ですか？設定された後、それがトークンを必要と戻りのルートを作成するよう

おかげ

Answer 1

Laravelは、Passport と呼ばれるAPIの認証のための良いパッケージを持っています。リクエストするにはhttp://{domain}/oauth/tokenです。

ユーザーがログインしようとすると、Vueはユーザーデータを渡すAxiosでポストリクエストを送信する必要があります。ユーザーにアクセス権がある場合は、トークンが返されます。

ルートを保護するには、middleware('auth:api')を使用できます。 Passportはこのミドルウェアを使用してトークンを検証します。

すなわち：

<script> 
    userData = { 
    ... 
    }, 
    axios.post('http://{domain}/oauth/token', userData) { 
    .then(function (response) { 
     console.log(response.access_token) 
     ... redirect to dashboard or something else 
    } 
    } 
    ... 
    </script> 

あなたが知っているかもしれませんが、トークンは、すべてのクライアントの要求に渡さなければならず、これを行う方法は、HTTPリクエストヘッダにトークンを渡しています。幸いにも、パスポートはすでにあなたのためにこれを行います。

希望します。