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 根实例建立以前就已经完成了,算是一种变通吧，至于这个姿式科学、优雅与否，我也不太好说，但至少目前为止本身的几个项目中使用一切正常……