第詳解Laravel5.6Passport實現(xiàn)Api接口認證7、注冊中間件，在app/Http/Kernel.php文件中的$routeMiddleware數(shù)組中添加如下中間件

protected$routeMiddleware=[

'client.credentials'=\Laravel\Passport\Http\Middleware\CheckClientCredentials::class,

];

然后在需要認證接口路由文件routes/api.php前面加上這個中間件。

Route::group(['prefix'='cart','middleware'=['client.credentials']],function(){

});

8、前端用戶表customer模型里面做如下配置：

useIlluminate\Foundation\Auth\UserasAuthenticatable;

useLaravel\Passport\HasApiTokens;

classCustomerextendsAuthenticatable

useHasApiTokens;

....

}

至此，后端的所有配置已完成。

接下來，打開接口測試工具（postman），輸入接口地址：wechat.test/oauth/token,請求類型POST，填上如下參數(shù),點擊send你會看到后臺返回了前端所需的access_token：

前端(vue.js)

首先去加載用戶登錄組件，即用戶登錄頁面。

1.配置路由，在index.js文件中寫入如下代碼

importLoginfrom'@/components/customer/Login'

exportdefaultnewRouter({

routes:[

....

path:'/customer/login',

name:'Login',

component:Login

})

2、加載組件，在customer文件夾的Login.vue文件中寫入如下代碼：

template

div

inputtype="email"v-model="customer.email"placeholder="請輸入郵箱"

inputtype="password"v-model="customer.password"placeholder="請輸入密碼"

button@click.prevent="submit"登錄/button

/div

/template

script

exportdefault{

data(){

return{

customer:{

email:'',

password:''

methods:{

submit(){

//將數(shù)據(jù)配置好

constdata={

grant_type:'password',//oauth的模式

client_id:1,//上面所說的client_id

client_secret:'CO331cA1mqiKgGvvgiDzPxh4CUu19vSEiqxM7LHD',//同上

username:this.customer.email,

password:this.customer.password,

this.axios.post('/oauth/token',data)

.then(res={

if(res.status==200){//如果成功了，就把access_token存入localStorage

localStorage.token_type=res.data.token_type

localStorage.access_token=res.data.access_token

this.$router.push({name:'Index'})

/script

客戶端查看localStorage，如圖：

3、在http.js文件中設置攔截器，用于判斷用戶是否登錄，若沒有登錄跳轉(zhuǎn)到登錄頁面。代碼如下：

//#創(chuàng)建http.js文件

importaxiosfrom'axios'

importrouterf