相信 Laravel 和 Vue.js 很多人都已经相当熟悉了,在较近版本的 Laravel 中,已经默认支持 Vue 组件化开发,这也顺应了眼下基于 API 前后分离以及开发单页面应用(SPA)的均势。 项目基本情况
解决步骤
使用 composer 安装好 laravel-wechat 包并做好相关配置,具体如下:
Overtrue\LaravelWechat\ServiceProvider::class, Overtrue\LaravelSocialite\ServiceProvider::class,
'wechat.oauth' => \Overtrue\LaravelWechat\Middleware\OAuthAuthenticate::class, 其它一些微信公众号相关的参数配置请参考 EasyWechat 官方文档
在 routesweb.php 中新增一条路由如下: Route::get('/mobile', 'MobileController@index')->middleware('wechat:oauth'); 注意该路由使用了 oauth:wechat 中间件,这个中间件将实现网页授权逻辑。
创建一个控制器 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。
axios.get(url).then(response => { console.log(response.data) }).catch(error => { console.log(error) })
// 请求头里的 openid $openid = Crypt::decrypt(\Request::cookie('openid')); 这里使用 Crypt::decrypt() 方法进行解密,如果没加密,可不使用。 总结由可可见,在 SPA 项目里完成网页授权也十分容易,当然,这也部分归功于安正超(overtrue)的 laravel-wechat 包。 因为不同于传统的 Laravel 项目,前后分离的 SPA 项目前后端以 API 作为纽带,而在这些 API 相关的控制器里,无法再随意使用服务器会话,所以这里使用 http cookie 作为替代,实际上网页授权逻辑,在进入 SPA 页面 Vue 根实例创建之前就已经完成了,算是一种变通吧,至于这个姿势科学、优雅与否,我也不太好说,但至少目前为止自己的几个项目中使用一切正常…… |
|