Vue-ssr微信开发--授权登录到项目部署
之前一直用 Vue 做微信端的SPA（Single-Page Application - 单页应用程序）开发，授权都是后端来做的，前端只需拉接口填充数据即可。
由于数据都是异步获取的，可能会出现页面加载完成但是数据却并未全部填充完毕的情况，为了提高用户体验，后来的项目改用了 Nuxt 框架，采用服务端渲染，一切都比较顺利，唯独就是就是踩了微信授权的坑。
当然，如果我没踩过，也就不会有这篇文章了，本着学习的目的与大家一起分享，如有不对的地方还望大家批评斧正~
下面进入正题
环境搭建
其实 nuxt 相关的脚手架已经集成到了 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，如果你看到如下的界面，证明你已经安装成功了
我们发现其实官方已经帮我们做了 demo ，我们只要对其进行改造即可。
微信授权设置
要想进行微信授权，你需要有一个自己的服务器、域名（如果没有，只能对测试号调试，微信规定了正式号必须使用域名），微信授权的官方文档参考这里
申请微信公众平台测试号
1.我们进入微信公众平台 申请一个测试号，使用测试号来开发是一个不错的选择，申请成功之后进入后台，
右下角侧边栏会有一个开发者工具选项，我们点击进入之后，选择 公众平台测试帐号
不出意外，你会拿到两个重要的数据 appID 和 appsercet，如下
2.我们需要将用户绑定到测试账号上来，扫描下方的测试号二维码，成功后你的信息会出现右侧的列表中，这一步很关键，之前没有做这一步导致获取不到用户信息！
3.最后，我们还需要设置回调域名，即
要注意的是：
1、这里填写的是域名（是一个字符串），而不是URL，因此请勿加http://等协议头；
2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：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换取网页授权access_token
第三步：刷新access_token（如果需要）
第四步：拉取用户信息(需scope为 snsapi_userinfo)
我们在 server 的 api 文件夹下面创建一个 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**设置的回调域名**%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获取网页的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 ){
// 第四步：根据获取的用户信息进行对应操作
let userinfo = JSON.parse(body);
console.log(userinfo)
res.send("\
openid:" + userinfo.openid + "
\
"+userinfo.nickname+" 的个人信息
\
![]("+userinfo.headimgurl+")
\
"+userinfo.city+"，"+userinfo.province+"，"+userinfo.country+"
\
")
}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
嗯，现在如果你浏览器访问 http://localhost:3000/api/oauth，不出意外，你会看到下面的界面：
恭喜你，你已经成功了一半了！
部署
我们的项目是运行在 3000 端口，现在要放到服务器上，通过 80 端口去访问它，我们要用到 nginx 来做转发（对于nginx的安装这里不多做赘述，建议不懂得小伙伴去看看），需要对其进行配置，这里，我们找到nginx安装目录下的 nignx.conf 进行简单的配置即可，我这里给出一个参考：
接下来就是要部署我们的 Nuxt 项目，它的部署与vue稍微有点不同，我们需要在我们的项目中，先在本地运行
npm run build
进行打包，之后本地创建一个 package.json 的文件（除去原本项目中dev的依赖），如下：
{
"name": "vue-ssr",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "chenwei ",
"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 接口，会弹起微信授权，如图所示
确认登录之后，授权成功，可以拉取到用户信息，如下图
同时，我们还可以在服务器端看到日志打印的个人信息如下：
到此，我们整个授权微信完成了，接下来只要将用户信息存入数据库即可~
嗯，补充一点，如果项目需要挂到服务器后台运行，这里我推荐使用 pm2 进行管理，有关 pm2 的用法网上教程也比较多，使用起来也很方便，这里我只是针对 Nuxt 项目而言，
执行命令 pm2 start npm -- start ，项目会被挂载在后台，并输出如下界面
当然，你也可以采用 pm2 list 查看当前的所有运行的node应用，这个 id 为当前应用的 id；
如果你要退出该应用，请使用pm2 delete _id即可~