在本地搭建好后端环境之后，我们来实现登录功能
1、安装SDK插件
SDK插件用来获取用户的openId
SDK是server端（也就是后端）的插件，帮助我们很容易的获取openId。openId是微信中用户身份的唯一标识，我们通过openId来识别用户，方便后期的用户管理
~/WeChatProjects/truth_hold$ npm install --save wafer2-client-sdk//系统返回信息+ wafer2-client-sdk@2.1.0added 1 package from 1 contributor and audited 10626 packages in 10.382s> wafer2-client-sdk应用文档/tencentyun/wafer2-client-sdk
2、添加授权登录按钮
编辑src/pages/index/index.vue文件的template部分，添加授权登录的按钮
登录按钮是小程序小程序集成的API，规定的登录按钮的写法
<!-- 参考代码，无需粘贴<template><div> —><!-- 需要粘贴的部分 --><button open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">授权登录</button>
3、配置登录链接
编辑src/config.js文件，config.js文件我们用来放配置型的代码，用下面的代码替换掉原先的代码
登录链接为什么是http://localhost:5757/weapp/login，后面的课程会具体分析
//域名，通过域名来找到服务器，在这里我们将本地电脑当成服务器//所以现在配置的域名是本地的，当项目实际上线，这里需要换成已备案的域名const host = 'http://localhost:5757'const config = {host,loginUrl: `${host}/weapp/login`}//我们在【ES6知识点详解】中讲过export的意思是向外暴露接口//这样在其他文件中可以通过import config from '@/config'引用//然后通过config.loginUrl就能得到在本文件中配置的值'http://localhost:5757/weapp/login'export default config
4、删除测试代码
在第二章学习ES6时，我们在index.vue界面添加了一些代码，现在将这些测试代码删除，删除后
<script>export default {data () {return {mark:0}},methods: {addMark (add) {this.mark = this.mark + addconsole.log("mark为：",this.mark) }}}</script>
5、引用配置文件
在src/pages/index/index.vue文件中添加import引用SDK插件、config.js文件
//参考代码，无需粘贴//<script>//需要粘贴的部分import qcloud from 'wafer2-client-sdk'import config from '@/config'//参考代码，无需粘贴//export default {
6、添加登录方法
编辑index.vue文件，在script的methods对象中添加方法loginSuccess和login
//参考代码，无需粘贴//methods: {//addMark (add) {...//},//需要粘贴的部分//登录成功会调用loginSuccess方法loginSuccess (res) {//将用户信息保存到缓存中，wx.setStorageSync是小程序的一个API，用来将信息添加到缓存中wx.setStorageSync('userinfo', res)},login () {//wx.showToast是小程序的消息提示框wx.showToast({title: '登录中',icon: 'loading'})//通过SDK插件，请求config.js中配置的loginUrl路径（http://localhost:5757/weapp/login）qcloud.setLoginUrl(config.loginUrl)qcloud.login({success: res => {//登录成功后，显示底部导航栏wx.showTabBar()console.log('登录成功', res)//调用loginSuccess方法，并将用户信息作为参数this.loginSuccess(res)},fail: err => {console.error('登录失败', err)}})}//参考代码，无需粘贴//},
7、授权本地域名
我们在src/config.js文件中定义的域名http://localhost:5757，不是一个真正的域名，只有在我们自己电脑上才有效
真正的域名如是可以通过网络访问的
对于这种不合法的域名，在微信开发者工具中，需要授权一下
点击右上角>>图标，点击详情—本地设置，选中不校验合法域名，就可以了~
8、测试
（1）打开终端，进入项目目录，打开两个窗口同时运行npm run dev
第一个窗口，在项目目录下运行npm run dev用来启动前端代码
~/WeChatProjects/truth_hold$ npm run dev
第二个窗口，在server目录下运行npm run dev用来启动后端代码
~/WeChatProjects/truth_hold/server$ npm run dev
然后点击授权登录按钮，右侧控制台出现下列信息，说明登录成功了
控制台中出现的，就是登录接口获取到的当前登录用户的微信昵称、城市、openId等信息
（2）登录可能出现错误–登录失败 Error: 响应错误
解决方法：
完善server/config.js文件中的下列字段
qcloudAppId: '必填',qcloudSecretId: '必填',qcloudSecretKey: '必填',// 微信小程序 App IDappId: '必填',// 微信小程序 App SecretappSecret: '必填',// 是否使用腾讯云代理登录小程序，设置为falseuseQcloudLogin: false,
qcloudAppId、qcloudSecretId、qcloudSecretKey这三个参数，我们在上一节已经配置过了。
appId、appSecret这两个参数需要在微信公众平台（https://mp./）登录小程序账号—开发—开发设置中查看。
useQcloudLogin参数改为false
9、查看数据库
登录mysql，可以看到cSessionInfo表中已经有一条客户信息了
我们主要会用到user_info字段，里面包含了openId、nickName等用户基本的信息
mysql> use cAuth;mysql> select * from cSessionInfo;| open_id | uuid | skey | create_time | last_visit_time| session_key | user_info+------------------------------+--------------------------------------+--------------------| oqURH46cYrMV3IwrrflosChndRTI | 88d1f834-bd64-491e-9779-18f3653528cc | dcd4a49ed87a0f4ebdff0f40ee4a53ed5572aa01 | -06-16 11:19:43 | -06-16 20:13:53 | aZha8RCFtrY1mp98kj9hSg== | {"openId":"oqURH46cYrMV3IwrrflosChndRTI","nickName":"ww","gender":2,"language":"zh_CN","city":"Qingdao","province":"Shandong","country":"China","avatarUrl":"/mmopen/vi_32/Q0j4TwGTfTJ2Te6nOOqiaeiae0WCWxRHKedpM7ZOs8AIU6og0ia1WChutbiaaaibthT7GbrewG0licrkbps8XajcHXzQ/132","watermark":{"timestamp":1560687233,"appid":"wxd2a52ff3594d8d7d"}} |+------------------------------+--------------------------------------+--------------------1 row in set (0.00 sec)
作者：猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~
点击查看课程目录：微信小程序全栈开发课程目录
