Laravel Vuejs 實戰：開發知乎 （21）前后端分離 API token 認證

解決上一節當中如果api路由改成：

Route::middleware('auth:api')->post('/questions/follow', 'QuestionController@followThroughApi');

之后 axios ajax post請求報 401 unauthorized 異常的問題。

原理：

Laravel Passport

Passport OAuth 認證

教程：

Building SPAs with Laravel 5 and Vue.js 2 - Finishing Up

API 認證解決方案：Laravel Passport

API Authentication in Laravel-Vue SPA using Jwt-auth

再增加一個：OAuth2 認證機制 Token 原理 以及 Laravel 安裝 Passport 身份驗證

修改指導：簡單來說，auth要求的token我們沒有提供：

通過api訪問走的是token認證，這里沒有提供token所以就認證失敗返回401了

這個tokendriver對應的其實就是：

這個TokenGuard.php文件，這里面需要一個api_token。需要在request里提供api_token參數，為了區別是哪個用戶，需要在user表添加api_token字段。認證過程調用的是TokenGuard.php中的getTokenForRequest方法：

這個bearerToken實際找header中是否存在Authorization

我們需要來提供這個token:

原理參考：

BearerToken：

本質上給用戶表添加api_token，后台根據這個字段判斷是否是有效的用戶，無效返回401，有效返回查詢結果。
優點是容易理解，缺點太簡單，安全也不夠。
為了安全，可以實現下面的功能：

每次登錄成功后刷新api_token為新值
其實 Laravel 官方提供了一個 Laravel Passport 的包。Laravel Passport is an OAuth2 server and API authentication package 。

Laravel Vue 前后端分離 使用token認證 

搞一搞laravel里api路由的 auth:api 和 api_token

Laravel API Token 體驗

JWT（Json Web Token）：

Laravel 5 中使用 JWT（Json Web Token） 實現基於API的用戶認證

【但是並不建議真實生產環境下用下面的方法，建議用官方的passport或者jwt】

步驟：

執行命令：

php artisan make:migration add_api_token_to_users_table --table=users

編輯****_add_api_token_to_users_table.php文件：

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddApiTokenToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            //
            $table->string('api_token', 64)->unique()->comment("api驗證token");
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            //
            $table->dropColumn('api_token');
        });
    }
}

執行命令：

php artisan migrate

其余的參考Laravel Vue 前后端分離 使用token認證 按照此鏈接教程，完成后打開網頁刷新，再點擊關注按鈕，axios提交的時候不會報401異常了，記得修改 api.php中：

Route::middleware('auth:api')->post('/questions/follow', 'QuestionController@followThroughApi');

修改一下之前的兩個錯誤：

1.因為之前采用的是

一個路由 處理刷新取關注狀態和按下按鈕關注的邏輯，這樣一刷新頁面就又相當於執行了一次關注/取關操作，必須分割開

//加載頁面時取關注狀態
Route::middleware('auth:api')->post('/questions/follow/stats', 'QuestionController@getFollowStats');
//執行關注/取關操作
Route::middleware('auth:api')->post('/questions/follow', 'QuestionController@followThroughApi');

然后，對應需要在QuestionController添加一個方法取關注狀態，

2.之前判斷用戶可否關注的邏輯錯誤

public function getFollowStats(Request $request)
{
    $user = auth()->guard('api')->user();
    $question = Question::find($request->get('question'));

    $followable = $user->can('follow', $question);

    return response()->json([
        'followable' => $followable,
    ]);
}

public function followThroughApi(Request $request)
{
    $user = auth()->guard('api')->user();
    $question = Question::find($request->get('question'));

    //同步記錄
    $user->followQuestions()->toggle($question->id);
    $question->followers_count = $question->followUsers()->count();
    $question->update();
    //判斷用戶關注狀態
    $followable = $user->can('follow', $question);

    return response()->json([
        'followable' => $followable,
    ]);
}

再然后，優化一下，用戶的數據不由props傳遞，也不由axios提交，因為有bearer token了。

接着QuestionController中followThroughApi和getFollowStats方法內，

$user獲取： 直接通過 auth()->user() 或 auth()->guard('api')->user(); 獲取即可。

QuestionController.php

<?php

namespace App\Http\Controllers;

use App\Http\Requests\QuestionStoreRequest;
use App\Models\Question;
use App\Repositories\QuestionRepository;
use App\User;
use Illuminate\Http\Request;

class QuestionController extends Controller
{

    /**
     * @var QuestionRepository
     */
    private $questionRepository;

    public function __construct(QuestionRepository $questionRepository)
    {
        $this->middleware(
            'auth',
            [
                'except' =>
                    [
                        'index',
                        'show',
                        'followThroughApi'
                    ]//非注冊用戶只能查看不能編輯添加更改刪除
            ]
        );

        $this->questionRepository = $questionRepository;
    }


    /** Display a listing of the resource.
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function index()
    {
        //
        $questions = $this->questionRepository->getQuestionPublished();
        return view('questions.index', compact('questions'));
    }


    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function create()
    {
        //
        return view('questions.create');
    }


    /**
     * @param QuestionStoreRequest $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function store(QuestionStoreRequest $request)//依賴注入QuestionStoreRequest實例
    {
        //
//        $data = $request->validate([
//            'title' => 'required|min:8',
//            'content' => 'required|min:28',
//        ]);
        //存儲topics
        $topics = $this->questionRepository->normalizeTopics($request->get('topics'));
        //初始化question要用到的數據
        $data = $request->all();
        $data['user_id'] = auth()->user()->id;

//        $question=Question::create($data); 被下方代碼取代
        $question = $this->questionRepository->create($data);

        //使用我們再question model里面添加的topics方法獲得 topics關聯，再使用attach方法
        $question->topics()->attach($topics);

        return redirect()->route('questions.show', $question);
    }


    /**
     * @param Question $question
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function show(Question $question)
    {
        //使用關系關聯加載，with方法會將分類之下的主題一起查詢出來，而且不會出現N+1影響性能的問題
        $question->with('topics')->get();
        //使用關系關聯加載，with方法會將分類之下的回答一起查詢出來，而且不會出現N+1影響性能的問題
        $question->with('answers')->get();

        return view('questions.show', compact('question'));
    }


    /**判斷權限 返回視圖
     * @param Question $question
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\Http\RedirectResponse|\Illuminate\View\View
     */
    public function edit(Question $question)
    {
        if (auth()->user()->can('update', $question)) //判斷當前用戶是否有權編輯更新該question實例
        {
            //返回編輯視圖
            return view('questions.edit', compact('question'));
        } else {
            //返回警告 沒有權限
            return redirect()->back()->with('warning', '你不能編輯不屬於你的問題！');
        }
    }


    /** Update the specified resource in storage.
     * @param QuestionStoreRequest $questionStoreRequest
     * @param Question $question
     * @return \Illuminate\Http\RedirectResponse
     */
    public function update(QuestionStoreRequest $questionStoreRequest, Question $question)
    {
        //更新前 判斷下權限
        if (!(auth()->user()->can('update', $question))) {
            //返回警告 沒有權限
            return redirect()->back()->with('warning', '你不能編輯不屬於你的問題！');
        }
        //取得更新的字段 使用Eloquent提供的update方法執行問題更新
        $question->update([
            'title' => $questionStoreRequest->get('title'),
            'content' => $questionStoreRequest->get('content'),
        ]);


        //topics的操作這時候看起來有點臃腫 可以使用TopicController來管理，暫時省略
        //存儲topics
        $topics = $this->questionRepository->normalizeTopics($questionStoreRequest->get('topics'));
        //使用我們再question model里面添加的topics方法獲得 topics關聯，
        //再使用sync方法同步tag 【刪除的會被刪除掉，沒刪除的就保留，新的就增加】
        $question->topics()->sync($topics);

        //更新完成，跳轉回去
        return redirect()->back();
    }


    /**Remove the specified resource from storage.
     * @param Question $question
     * @return \Illuminate\Http\RedirectResponse
     * @throws \Exception
     */
    public function destroy(Question $question)
    {
        //
        if (auth()->user()->can('destroy', $question)) {
            $question->delete();
            return redirect()->route('questions.index')->with('success', "刪除成功！");
        }
        return redirect()->back()->with('danger', "你不能刪除不屬於你的問題！");
    }


    public function follow(Question $question)
    {
        if (auth()->user()->can('follow', $question)) //通過QuestionPolicy的follow方法判斷用戶是否可以關注問題
        {
            $message = "關注";
        } else {
            $message = "取關";
        }
        //同步記錄
        auth()->user()->followQuestions()->toggle($question);
        $question->followers_count = $question->followUsers()->count();
        $question->save();
        return redirect()->back()->with('success', $message . '成功！');
    }

    public function getFollowStats(Request $request)
    {
        $user = auth()->guard('api')->user();
        $question = Question::find($request->get('question'));

        $followable = $user->can('follow', $question);

        return response()->json([
            'followable' => $followable,
        ]);
    }

    public function followThroughApi(Request $request)
    {
        $user = auth()->guard('api')->user();
        $question = Question::find($request->get('question'));

        //同步記錄
        $user->followQuestions()->toggle($question->id);
        $question->followers_count = $question->followUsers()->count();
        $question->update();
        //判斷用戶關注狀態
        $followable = $user->can('follow', $question);

        return response()->json([
            'followable' => $followable,
        ]);
    }
}

QuestionPolicy.php

<?php

namespace App\Policies;

use App\Models\Question;
use App\User;
use Illuminate\Auth\Access\HandlesAuthorization;

class QuestionPolicy
{
    use HandlesAuthorization;

    /**
     * Create a new policy instance.
     *
     * @return void
     */
    public function __construct()
    {
        //

    }


    /**
     * 判斷用戶是否有權編輯更新問題
     * @param User $user
     * @param Question $question
     * @return bool
     */
    public function update(User $user, Question $question)
    {
        return $user->id === $question->user_id;
    }


    /**
     * 判斷用戶是否有權刪除問題
     * @param User $user
     * @param Question $question
     * @return bool
     */
    public function destroy(User $user, Question $question)
    {
        return $user->id === $question->user_id;
    }


    /** 用戶是否可以關注問題，未登錄不行，關注了不行
     * @param User $user
     * @param Question $question
     * @return bool
     */
    public function follow(User $user, Question $question)
    {
        //axiox api 需要auth:api 先不實現，注釋掉
        if (auth()->check()) {
            return !($user->followQuestions->contains('id', $question->id));
        } else {

        }
    }
}

app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{--    CSRF Token--}}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{--    api bearer Token--}}
    <meta name="api-token" content="{{ Auth::check() ? 'Bearer '.auth()->user()->api_token : 'Bearer ' }}">

    <title>{{ config('app.name', 'Laravel') }}</title>


    {{--    Fonts--}}
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    {{--    Styles--}}
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">

</head>
<body>
<div id="app">
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                {{--                Left Side Of Navbar--}}
                <ul class="navbar-nav mr-auto">

                </ul>

                {{--                Right Side Of Navbar--}}
                <ul class="navbar-nav ml-auto">
                    {{--                    Authentication Links--}}
                    @guest
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        @if (Route::has('register'))
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                            </li>
                        @endif
                    @else
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                      style="display: none;">
                                    @csrf
                                </form>
                            </div>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </nav>

    <main class="py-4">
        @include('flash::message')
        @yield('content')
    </main>
</div>
{{--Scripts--}}
<script src="{{ mix('js/app.js') }}"></script>

<script>
    $('#flash-overlay-modal').modal();
    window.UEDITOR_CONFIG.serverUrl = "{{ config('ueditor.route.name') }}";
</script>
@yield('footer-js')
</body>
</html>

api.php

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| 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::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::middleware('api')->get('/topics', function (Request $request) {
    $query = $request->query('q');
    return \App\Topic::query()->where('name', 'like', '%' . $query . '%')->get();
});
//加載頁面時取關注狀態
Route::middleware('auth:api')->post('/questions/follow/stats', 'QuestionController@getFollowStats');
//執行關注/取關操作
Route::middleware('auth:api')->post('/questions/follow', 'QuestionController@followThroughApi');

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {
}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let api_token = document.head.querySelector('meta[name="api-token"]');

if (api_token) {
    window.axios.defaults.headers.common['Authorization'] = api_token.content;
} else {
    console.error('Authorization token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

QuestionFollowButton.vue

<template>
    <button :class="classObject"
            @click="follow"
            v-text="text">
    </button>
</template>

<script>
    export default {
        props: ['question'],
        name: "QuestionFollowButton",
        data() {
            return {
                followable: true,
            }
        },
        computed: {
            text() {
                return this.followable ? "關注用戶" : "取消關注";
            },
            classObject() {
                return this.followable ? "btn btn-block btn-primary" : "btn btn-block btn-danger";
            },
        },
        mounted: function () {
            let currentObj = this;
            axios.post('/api/questions/follow/stats', {'question': this.question})
                .then(function (response) {
                    currentObj.followable = response.data.followable;
                })
                .catch(function (e) {
                    console.log(e);
                });
        },
        methods: {
            follow() {
                let currentObj = this;
                axios.post('/api/questions/follow', {'question': this.question})
                    .then(function (response) {
                            currentObj.followable = response.data.followable;
                        }
                    )
                    .catch(function (e) {
                        console.log(e);
                    });
            },
        }
    }
</script>

<style scoped>

</style>

show.blade.php

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md offset-1">
                {{--問題--}}
                <div class="card">
                    <div class="card-header">
                        {{ $question->title }}

                        @foreach(['success','warning','danger'] as $info)
                            @if(session()->has($info))
                                <div class="alert alert-{{$info}}">{{ session()->get($info) }}</div>
                            @endif
                        @endforeach

                        @can('update',$question)
                            <a href="{{ route('questions.edit',$question) }}" class="btn btn-warning">編輯</a>
                        @endcan

                        @can('destroy',$question)
                            <form action="{{ route('questions.destroy',$question) }}" method="post">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">刪除</button>
                            </form>
                        @endcan

                        @forelse($question->topics as $topic)
                            <button class="btn btn-secondary float-md-right m-1">{{ $topic->name }}</button>
                        @empty
                            <p class="text text-warning float-md-right"> "No Topics"</p>
                        @endforelse

                        <p class="text text-info float-md-right"> 已有{{ count($question->answers) }}個回答</p>

                    </div>
                    <div class="card-body">
                        {!! $question->content !!}
                    </div>
                </div>


                {{--回答提交form--}}
                {{--只有登錄用戶可以提交回答--}}
                @if(auth()->check())
                    <div class="card mt-2">
                        <div class="card-header">
                            提交回答
                        </div>
                        <div class="card-body">
                            <form action="{{ route('answers.store',$question) }}" method="post">
                            @csrf
                            <!-- 回答編輯器容器 -->
                                <script id="container" name="content" type="text/plain"
                                        style="width: 100%;height: 200px">{!! old('content') !!}</script>
                                <p class="text text-danger"> @error('content') {{ $message }} @enderror </p>
                                <!--提交按鈕-->
                                <button type="submit" class="btn btn-primary float-md-right mt-2">提交回答</button>
                            </form>
                        </div>
                    </div>
                @else
                    {{--顯示請登錄--}}
                    <a href="{{ route('login') }}" class="btn btn-success btn-block mt-4">登錄提交答案</a>
                @endif
                {{--展示答案--}}
                @forelse($question->answers as $answer)
                    <div class="card mt-4">
                        <div class="card-header">
                            <div class="float-left">
                                <img src="{{ $answer->user->avatar }}" class="img-thumbnail imgWrap"
                                     style="height: 50px" alt="{{ $answer->user->name }}">
                                <span class="text text-info">{{ $answer->user->name }}</span>
                            </div>
                            <span class="float-right text text-info m-auto">{{ $answer->updated_at }}</span>
                        </div>

                        <div class="card-body">
                            {!!  $answer->content  !!}
                        </div>
                    </div>

                @empty

                @endforelse
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h2> {{ $question->followers_count }}</h2>
                        <span>關注者</span>
                    </div>

                    <div class="card-body">
                        <div id="app">
                            <question-follow-button question="{{$question->id}}">
                            </question-follow-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer-js')
    @include('questions._footer_js')
@endsection

補充：

截取

API requests with axios always unauthorized with Laravel API 

I'm not using Passort or any library like that since it's an internal API serving only VueJS to obtain stuff from the database.

If the API is not stateless, meaning that the user is known to be logged in with a standard session cookie, then you can just use the default 'web' middleware for the API routes.

In the default RouteServiceProvider, change the mapApiRoutes function to use the web middleware instead:

protected function mapApiRoutes()
{
    Route::prefix('api')
        // ->middleware('api')
        ->middleware('web')
        ->namespace($this->namespace)
        ->group(base_path('routes/api.php'));
}

That being said, you should really put the API routes behind the default 'auth' middleware since they're not throttled by default.

In the routes/api.php file:

Route::group(['middleware' => 'auth'], function() {
    Route::get('/latest', 'InternalApiController@latest');
});

And if you want to ensure it's an AJAX request, you can create a simple middleware that checks that the request has the X-Requested-With header set to XMLHttpRequest.

class RequestIsAjax
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (!$request->ajax()) {
            return redirect()->route('login.index');
        }

        return $next($request);
    }
}

And register it within the $routeMiddleware array inside the \App\Http\Kernel class.

protected $routeMiddleware = [
    'ajax' => \App\Http\Middleware\RequestIsAjax::class,