Laravel + Vue.js 的 SPA 項目中進行微信網頁受權的一種姿式

相信 Laravel 和 Vue.js 不少人都已經至關熟悉了，在較近版本的 Laravel 中，已經默認支持 Vue 組件化開發，這也順應了眼下基於 API 先後分離以及開發單頁面應用（SPA）的均勢。

項目基本狀況

• Laravel 5.4

• overtrue/laravel-wechat 包 （內部依賴 overtrue/wechat)

• vue.js 2.x

• vue-router (非必須)

• vue-axios (非必須)

解決步驟

1. 安裝 laravel-wechat

使用 composer 安裝好 laravel-wechat 包並作好相關配置，具體以下：

• 在 configapp.php 中的 providers 數組下加入下面兩行

Overtrue\LaravelWechat\ServiceProvider::class,
Overtrue\LaravelSocialite\ServiceProvider::class,

• 在 appHttpKernel.php 中的 $routeMilleware 下加入

'wechat.oauth' => \Overtrue\LaravelWechat\Middleware\OAuthAuthenticate::class,

其它一些微信公衆號相關的參數配置請參考 EasyWechat 官方文檔

1. 添加路由

在 routesweb.php 中新增一條路由以下：

Route::get('/mobile', 'MobileController@index')->middleware('wechat:oauth');

注意該路由使用了 oauth:wechat 中間件，這個中間件將實現網頁受權邏輯。

1. 建立控制器及聲明方法

建立一個控制器 MobileController，並在其中聲明以下方法：

public function index()
{
    // 拿到受權微信用戶資料
    $wechatUser = session('wechat.oauth_user');

    return response()->view('mobile')->cookie('openid', $wechatUser->id ?? null);
}

這一方法將會在 http 響應中帶上一個含有 openid 值的 Cookie，須要注意的是，這個 Cookie 是加密了的，因此不用擔憂安全性方面的問題。若是不想加密，能夠在 EncryptCookies 中間件裏進行配置。

此外，除了直接使用 openid 以外，也可使用其它值，甚至根據 openid 查到你本地數據庫中的用戶數據，進而在 Cookie 中傳 user_id。具體用法依我的喜愛和需求而定。

響應頭中加入 Cookie 也是全部步驟中的關鍵所在，有了這個 Cookie，後續前端頁面向服務器發起請求時會自動帶上這個 Cookie。

1. 添加模板以及 Vue 組件，這個能夠參照 Laravel 默認的 welcome.blade.php 模板以及 App.vue 組件調整獲得。(注意模板文檔名，按前面示例，應該改爲 mobile.blade.php)

2. 定義 API 路由及對應的控制器，在前端頁面里根據須要向服務器發起請求。具體怎麼發就得看用的什麼插件了，好比我用的 axios，事件就很簡單

axios.get(url).then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

1. 最後，在 API 控制器裏，能夠取到當前受權的微信用戶 openid

// 請求頭裏的 openid
$openid = Crypt::decrypt(\Request::cookie('openid'));

這裏使用 Crypt::decrypt() 方法進行解密，若是沒加密，可不使用。

總結

由可可見，在 SPA 項目裏完成網頁受權也十分容易，固然，這也部分歸功於安正超（overtrue)的 laravel-wechat 包。

由於不一樣於傳統的 Laravel 項目，先後分離的 SPA 項目先後端以 API 做爲紐帶，而在這些 API 相關的控制器裏，沒法再隨意使用服務器會話，因此這裏使用 http cookie 做爲替代，實際上網頁受權邏輯，在進入 SPA 頁面 Vue 根實例建立以前就已經完成了,算是一種變通吧，至於這個姿式科學、優雅與否，我也不太好說，但至少目前爲止本身的幾個項目中使用一切正常……