Vue-ssr微信開發(fā)--授權登錄到項目部署
之前一直用 Vue 做微信端的SPA（Single-Page Application - 單頁應用程序）開發(fā)，授權都是后端來做的鲫惶，前端只需拉接口填充數(shù)據(jù)即可做裙。
由于數(shù)據(jù)都是異步獲取的岗憋，可能會出現(xiàn)頁面加載完成但是數(shù)據(jù)卻并未全部填充完畢的情況，為了提高用戶體驗锚贱，后來的項目改用了 Nuxt 框架仔戈，采用服務端渲染，一切都比較順利拧廊，唯獨就是就是踩了微信授權的坑监徘。
當然，如果我沒踩過吧碾，也就不會有這篇文章了凰盔，本著學習的目的與大家一起分享，如有不對的地方還望大家批評斧正~
下面進入正題
環(huán)境搭建
其實 nuxt 相關的腳手架已經(jīng)集成到了 vue-cli倦春，同時提供 starter户敬、express、koa睁本、adonuxt多個不同的模版尿庐，這里我們選擇使用 express 模版
采用以下命令，初始化我們的項目
// 初始化
$ vue init nuxt-community/express-template vue-ssr
然后安裝依賴
$ cd vue-ssr
$ npm install
啟動項目
$ npm run dev
訪問localhost:3000呢堰，如果你看到如下的界面抄瑟，證明你已經(jīng)安裝成功了
我們發(fā)現(xiàn)其實官方已經(jīng)幫我們做了 demo ，我們只要對其進行改造即可枉疼。
微信授權設置
要想進行微信授權皮假，你需要有一個自己的服務器鞋拟、域名（如果沒有，只能對測試號調(diào)試惹资，微信規(guī)定了正式號必須使用域名）严卖，微信授權的官方文檔參考這里
申請微信公眾平臺測試號
1.我們進入微信公眾平臺 申請一個測試號，使用測試號來開發(fā)是一個不錯的選擇布轿，申請成功之后進入后臺哮笆，
右下角側(cè)邊欄會有一個開發(fā)者工具選項，我們點擊進入之后汰扭，選擇 公眾平臺測試帳號
不出意外稠肘，你會拿到兩個重要的數(shù)據(jù) appID 和 appsercet，如下
2.我們需要將用戶綁定到測試賬號上來萝毛，掃描下方的測試號二維碼项阴，成功后你的信息會出現(xiàn)右側(cè)的列表中，這一步很關鍵笆包，之前沒有做這一步導致獲取不到用戶信息环揽！
3.最后，我們還需要設置回調(diào)域名庵佣，即
要注意的是：
1歉胶、這里填寫的是域名（是一個字符串），而不是URL巴粪，因此請勿加http://等協(xié)議頭通今；
2、授權回調(diào)域名配置規(guī)范為全域名肛根，比如需要網(wǎng)頁授權的域名為：www.qq.com辫塌，配置以后此域名下面的頁面 http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進行OAuth2.0鑒權派哲。但http://pay.qq.com 臼氨、 http://music.qq.com 、 http://qq.com無法進行OAuth2.0鑒權芭届。
到此储矩，微信授權的后臺配置我們已基本完成，接下來就是我們編寫服務端代碼的
服務端代碼
我們按照微信官方的授權步驟來看喉脖，主要分為一下幾個4步：
微信授權使用的是OAuth2.0授權的方式椰苟。主要有以下簡略步驟：
第一步：用戶同意授權抑月，獲取code
第二步：通過code換取網(wǎng)頁授權access_token
第三步：刷新access_token（如果需要）
第四步：拉取用戶信息(需scope為 snsapi_userinfo)
我們在 server 的 api 文件夾下面創(chuàng)建一個 oauth.js 用于微信授權树叽。
在次之前，我們需要安裝一個 request 模塊谦絮，方便我們處理請求题诵，即
npm install request --save
接著洁仗，我們編寫 oauth.js 文件，具體代碼如下：
//引入 路由 和 request 模塊
import { Router } from 'express';
import request from 'request'
const router = Router();
//授權請求接口
router.get('/oauth' , function (req , res , next) {
//用戶同意授權性锭，獲取code
let router = 'get_access_token';
//編碼后的地址
let return_url = 'http%3A%2F%2F**設置的回調(diào)域名**%2Fapi%2F' + router ;
let scope = 'snsapi_userinfo';
//重定向到微信授權鏈接
res.redirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + AppID + '&redirect_uri=' + return_url + '&response_type=code&scope=' + scope + '&state=STATE#wechat_redirect');
})
router.get('/get_access_token',function (req, res, next) {
//第二步：通過code獲取網(wǎng)頁的access_token
let code = req.query.code;
request.get({
url:'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + AppID + '&secret='+ AppSecret + '&code=' + code + '&grant_type=authorization_code'
},
function (error, response, body) {
if( response.statusCode == 200 ){
// 第三步：拉取用戶信息(需scope為 snsapi_userinfo)
let data = JSON.parse( body );
let access_token = data.access_token;
let openid = data.openid;
request.get({
url : 'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token + '&openid=' + openid + '&lang=zh_CN',
},
function (error, response, body) {
if( response.statusCode == 200 ){
// 第四步：根據(jù)獲取的用戶信息進行對應操作
let userinfo = JSON.parse(body);
console.log(userinfo)
res.send("\
<h1>openid:" + userinfo.openid + "</h1>\
<h1>"+userinfo.nickname+" 的個人信息</h1>\
<p>![]("+userinfo.headimgurl+")</p>\
<p>"+userinfo.city+"赠潦，"+userinfo.province+"，"+userinfo.country+"</p>\
")
}else{
console.log(response.statusCode);
}
}
)
}else{
console.log(response.statusCode);
}
}
)
})
export default router
嗯草冈，授權代碼就寫完了她奥，記得要掛載到api目錄下 index.js 中
import { Router } from 'express'
import oauth from './oauth'
const router = Router()
// Add USERS Routes
router.use(oauth)
export default router
嗯，現(xiàn)在如果你瀏覽器訪問 http://localhost:3000/api/oauth怎棱，不出意外哩俭，你會看到下面的界面：
恭喜你，你已經(jīng)成功了一半了拳恋！
部署
我們的項目是運行在 3000 端口凡资，現(xiàn)在要放到服務器上，通過 80 端口去訪問它谬运，我們要用到 nginx 來做轉(zhuǎn)發(fā)（對于nginx的安裝這里不多做贅述隙赁，建議不懂得小伙伴去看看），需要對其進行配置梆暖，這里伞访，我們找到nginx安裝目錄下的 nignx.conf 進行簡單的配置即可，我這里給出一個參考：
接下來就是要部署我們的 Nuxt 項目轰驳，它的部署與vue稍微有點不同咐扭，我們需要在我們的項目中，先在本地運行
npm run build
進行打包滑废，之后本地創(chuàng)建一個 package.json 的文件（除去原本項目中dev的依賴）蝗肪，如下：
{
"name": "vue-ssr",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "chenwei <cryptic_v@163.com>",
"private": true,
"scripts": {
"dev": "backpack dev",
"build": "nuxt build && backpack build",
"start": "cross-env NODE_ENV=production node build/main.js",
"precommit": "npm run lint",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"dependencies": {
"axios": "^0.16.2",
"cross-env": "^5.0.1",
"express": "^4.15.3",
"nuxt": "^1.0.0-rc3",
"request": "^2.83.0",
"source-map-support": "^0.4.15"
}
}
將打包好的 .nuxt 文件夾 ， bulid 文件夾 和 package.json 文件一起放到 服務器的項目目錄下（我這里使用的是vue-ssr）,
進入該文件夾蠕趁，運行npm install安裝依賴薛闪，完成后運行npm start，項目即可運行俺陋，接著我們訪問 api/oauth 接口豁延，會彈起微信授權，如圖所示
確認登錄之后腊状，授權成功诱咏，可以拉取到用戶信息，如下圖
同時缴挖，我們還可以在服務器端看到日志打印的個人信息如下：
到此袋狞，我們整個授權微信完成了，接下來只要將用戶信息存入數(shù)據(jù)庫即可~
嗯，補充一點苟鸯，如果項目需要掛到服務器后臺運行同蜻，這里我推薦使用 pm2 進行管理，有關 pm2 的用法網(wǎng)上教程也比較多早处，使用起來也很方便湾蔓，這里我只是針對 Nuxt 項目而言，
執(zhí)行命令 pm2 start npm -- start 砌梆，項目會被掛載在后臺默责，并輸出如下界面
當然，你也可以采用 pm2 list 查看當前的所有運行的node應用咸包，這個 id 為當前應用的 id傻丝；
如果你要退出該應用，請使用pm2 delete _id即可~
