Laravel——Api認證之Passport使用

目前，先後端分離時愈來愈多了，後端只須要提供一個Api接口解能夠了，可是，登陸問題怎麼解決呢？下面就來介紹如何使用laravel有效解決登陸問題。

思路流程

1. 因爲在前端頁面，每一個用戶確定都有本身單獨的模塊，因此咱們後端須要返回各自用戶的數據。
2. 用戶首先進行登陸，後臺利用Passport官方包，給該用戶返回一個access_token（暗號）
3. 用戶獲取到access_token（暗號）,而後存在本地的localstorage裏或者是vuex的state裏（前提時用vue的，其餘框架同理）。
4. 而後在用戶模塊訪問後臺的時候按要求帶上access_token訪問。
5. 後臺就能夠根據access_token查到對應的用戶，查出數據，返回給前端。

安裝

• 使用composer安裝Passport：
  

composer require laravel/passport
複製代碼

• 接下來，將 Passport 的服務提供者註冊到配置文件 config/app.php 的 providers 數組中：
  

Laravel\Passport\PassportServiceProvider::class,
複製代碼

• 而Passport服務時官方包，有自帶的數據庫遷移目錄，因此直接能夠用命令執行遷移來自動建立存儲各類信息的數據表

php artisan migrate
複製代碼

• 而後建立密碼受權客戶端

php artisan passport:client --password
# 建立了client_id和client_secret,前端登陸驗證的時候必須把這兩個玩意帶着喲
複製代碼

• 建立了密碼受權客戶端就能夠按如下要求獲取access_token了。以vue+axios舉例

(這裏爲了防止不太會axios的小夥伴，在main.js進行配置一下。)

import axios from 'axios'
Vue.prototype.axios = axios
//安裝好axios包以後，在根目錄的main.js裏添加上面的兩行代碼，注意放到引入Vue的下面。
複製代碼

你確定會問傳到後臺的data client_id 和 client_secret是什麼? 說簡單點，其實就是表示你前端要用到這個passport來驗證的一個暗號。

• 這個時候你就須要打如下命令獲取這兩玩意。

php artisan passport:keys
# 獲取到了，而後記住這兩個東西，沒有記住，也能夠在數據庫裏的oauth_clients表裏去看喲
複製代碼

以上須要跑的命令基本就跑完了 ， 接下來就時配置方面的了。

配置

• 首先， 得讓安裝的Passport服務在認證服務提供AuthServiceProvider的boot方法中調用Passport::routes函數。若是令牌須要有效期和刷新時間看下圖：

public function boot() {
        $this->registerPolicies();  //註冊

        Passport::routes(); //認證的路由
        Passport::tokensExpireIn(Carbon::now()->addHours(3));   //令牌有效期3小時
        Passport::refreshTokensExpireIn(Carbon::now()->addDays(30));    //令牌刷新時間30
    }
複製代碼

若是以爲時間過長或者太短，您還可使用addMinutes()或者時addMonths()均可以的。

• 最後，將配置文件 config/auth.php中受權看守器 guards 的 api 的 driver 選項改成 passport。此調整會讓你的應用程序在在驗證傳入的 API 的請求時使用 Passport 的 TokenGuard 來處理：

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],
複製代碼

設置中間件和路由

• 首先須要在 app/Http/Kernel.php 的 $routeMiddleware 變量中添加新的中間件：

protected $routeMiddleware = [
    'client.credentials' => \Laravel\Passport\Http\Middleware\CheckClientCredentials::class,
];
複製代碼

• 而後在須要的模塊路由routes/api.php前面加上這個中間件。

//用戶
 Route::get('/customer', 'customerController@index')->middleware('client.credentials');
複製代碼

前端的登陸測試

後端已經基本都配置好了，那麼再就須要前端進行登陸按要求發送請求給後端了。

//前面已經說了，咱們會用到client_id和client_secret這個時候就要派上用場了喲。
    //請看如下html的代碼
    <template>   
    <input type="email" v-model="userInfo.email" placeholder="請輸入郵箱"> <input type="password" v-model="userInfo.password" placeholder="請輸入密碼"> <button @click.prevent="submit">登 錄</button> </template> //請看vue裏的代碼 <script> export default { data() { return { userInfo: { email: '', password: '' } } }， methods: { submit() { //將數據配置好 const data = { grant_type: 'password', //oauth的模式 client_id: 1, //上面所說的client_id client_secret: '5wq3G7wv0ZuK7Qj6aFtwZaX6XyfLLa8hLSDDJyAB',//同上 username: this.userInfo.email, password: this.userInfo.password, } this.axios.post('http://your domain/oauth/token', data) .then(res => { if(res.status == 200) { //若是成功了 //將收到的token_type和access_token存到localStorage裏 localStorage.token_type = res.data.token_type localStorage.token_token = res.data.access_token //登陸成功跳轉到你想跳轉的地址 ... } }) } } } </script> 複製代碼

經過這樣的請求，只要後端配置好了，基本就能收到如下的json

固然從咱們上面的代碼能夠看出，咱們也已經將重要的東西 access_token和 token_type存了起來啦。

axios的配置

終於把令牌access_token和令牌類型token_type拿到手了。那麼後面，咱們前端只要涉及到api認證的請求（咱們這裏拿我的中心作例子）就應該把這兩個玩意帶着發送給後端，這樣後端就能夠分辨是哪一個用戶的請求了，也就能夠返回相應的信息了。

好了，這個時候就須要配置一下axios了喲，把之後的請求都帶上這兩玩意就是了，簡單、舒服。請看如下的配置，咱們這裏單首創建一個http.js從新配置了axios。

//#建立http.js文件
import axios from 'axios'
import router from '@/router'

// axios 配置
axios.defaults.timeout = 5000;
// axios.defaults.baseURL = 'https://api.github.com';

// http request 攔截器
axios.interceptors.request.use(
    config => { //將全部的axios的header里加上token_type和access_token
        config.headers.Authorization = `${localStorage.token_type} ${localStorage.access_token}`;
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 攔截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        // 401 清除token信息並跳轉到登陸頁面
        if (error.response.status == 401) {
            alert('登陸信息已失效，請從新登陸')
            router.replace({    //若是失敗，跳轉到登陸頁面
                name: 'login'
            })
        }
        return Promise.reject(error.response.data)
    });

export default axios;       //而後再次export出去，嘿嘿 main.js那裏就得改改咯
複製代碼

//#main.js文件
//將原來上面配置的 import axios from 'axios'
//改爲
import axios from './http'  //這裏個人http.js是和main.js同一目錄。
複製代碼

我的用戶頁面測試

都配置好啦，接下來，拿用戶中心頁面來獲取用戶的信息了。

<script>
    export default {
        data() {
            return {
                user[]
            }
        },
        created() {
            this.getUser()
        },
        methods: {
            getUser() {
                this.axios.get('http://your domain/api/customer')
                    .then(res => {
                        console.log(res)
                        this.user = res.data    //將獲得的用戶信息,傳給user。
                    })
            }
        }
    }
</script>
複製代碼

哇，終於獲取到登陸的那個用戶的用戶信息了喲。不過......

後臺怎麼解析token拿到用戶信息。

還有最後的一個問題， 後臺根據怎麼根據前端發送的access_token來查詢到用戶信息發送給前端呢。

打開你的User模型User.php，一般放在Http目錄下。 在文件裏的上面加上use Laravel\Passport\HasApiTokens;而後User類裏，也別忘了加上 use Notifiable,HasApiTokens;這個就是用來根據token來獲取user信息的。

#CustomerController@index方法裏。
    $user = auth('api')->user();
    return $user;       //成功將用戶信息返回給前端啦。
複製代碼

就這樣完美結束啦。歡迎吐槽~