nuxt如何实现微信授权登录

[<PENG />]

众所周知使用vue等前端框架渲染的页面对SEO不是很友好，故选择使用服务端渲染。对比nuxt与官方 HackerNews Demo后选择使用nuxt。由于授权登录与session相关，故不选择使用nuxt的基础配置，后端框架对比了koa与express选择使用express架构。

反向代理

由于微信授权登录有JS安全域名接口限制，本项目的调试环境为localhost:3000，需要使用nginx或apache实现反向代理

项目架构

• 使用vue-cli安装starter模板

vue init nuxt-community/starter-template <project-name>

• 新建server.js文件，使用express框架及backpack作为构建工具
• 新建auth.js的中间件，判断用户是否登录，未登录则跳转到微信授权登录地址
• 新建vuex状态树存放accesstoken(用户的登录凭证)
• 新建callback页面，向node后端发送请求获取accesstoken，获取成功后存入vuex状态树，当页面刷新时，vuex状态树中的accesstoken会被刷新不存在，但改accesstoken还存在与session中，vuex状态树会从session中读取并存入vuex状态树

示例代码

具体可看示例代码，里面有详细的注释说明。