微信小程序中系统登录的简单实现

新建目录/pages/login

1 登录界面 login.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view class="login-from"> 
<view class="inputView">
<image class="nameImage" src="../images/name.png"></image> 
<label class='loginLab'>帐号</label>
<input class='inputText' placeholder='请输入帐号' bindinput="phoneInput" ></input>
</view>
<view class="line"></view> 
<view class='inputView'>
<image class="keyImage" src="../images/key.png"></image> 
<label class='loginLab'>密码</label>
<input class='inputText' password='true' placeholder='请输入密码' 
bindinput="passwordInput"></input>
</view>
<view class='loginBtnView'>
<button class='loginBtn' type='primary'
size='{{primarySize}}' loading='{{loading}}'
plain='{{plain}}' disabled='{{disabled}}' bindtap='login'>
登录
</button>
</view>

2 登录js实现 login.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
//index.js
var md5 = require('../util/md5.js') 
var util = require('../util/util.js') 
//获取应用实例
const app = getApp()

Page({
data: {
motto: '设备远程运维管理系统',
mottoChild: '西安陕鼓动力股份有限公司',
userInfo: {},
hasUserInfo: false,
phone: '',
password: '',
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
// 获取输入账号 
phoneInput: function (e) {
this.setData({
phone: e.detail.value
})
},

// 获取输入密码 
passwordInput: function (e) {
this.setData({
password: e.detail.value
})
}, 
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
// 登录 
login: function () {
if (this.data.phone.length == 0 || this.data.password.length == 0) {
wx.showToast({
title: '用户名和密码不能为空',
icon: 'loading',
duration: 2000
})
} else {
var that = this;
var password = md5.hexMD5(this.data.password); //md5加密
//登录
wx.request({
url: "https://www.xxx.com/login",  // 系统的登录api
header: {
'content-type': 'application/x-www-form-urlencoded' // 不要写 application/json
},
method: 'POST', 
data: { username: this.data.phone, password: password }, 
success: function (res) {
if (res.data.code == 400102) {
wx.showToast({
title: 'token无效',
icon: 'loading',
duration: 2000
})
}
if(res.data.code == 400103) {
wx.showToast({
title: '用户名或密码不正确',
icon: 'loading',
duration: 2000
})
}
if (res.data.code == 400104) {
wx.showToast({
title: '用户没有登录权限',
icon: 'loading',
duration: 2000
})
}
if (res.data.code == 200000) {
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
// 全局变量存储token和userId信息
getApp().globalData.header.XAuth = res.data.result.accessToken;
getApp().globalData.userId = res.data.result.userId;
// 这里修改成跳转的页面 
wx.switchTab({
url: '../main/main', 
})
}
}
}) 
}
},
onLoad: function () {
// 查看全局变量中是否存在token,存在则直接登录到主界面
if (app.globalData.header.XAuth != '') {
wx.switchTab({
url: '../main/main',
})
}
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

3 添加全局变量 app.js

1
2
3
4
5
globalData: {
userInfo: null, //系统用户信息
userId: null, //系统用户id
header: {'XAuth':''} // token
}

4 md5 密码加密

先介绍小程序模块化
我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。需要注意的是：
（1）、 exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
（2）、小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

md5.js程序如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
/*  
 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message  
 * Digest Algorithm, as defined in RFC 1321.  
 * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002.  
 * Code also contributed by Greg Holt  
 * See http://pajhome.org.uk/site/legal.html for details.  
 */    
    
/*  
 * Add integers, wrapping at 2^32. This uses 16-bit operations internally  
 * to work around bugs in some JS interpreters.  
 */    
function safe_add(x, y)    
{    
  var lsw = (x & 0xFFFF) + (y & 0xFFFF)    
  var msw = (x >> 16) + (y >> 16) + (lsw >> 16)    
  return (msw << 16) | (lsw & 0xFFFF)    
}    
    
/*  
 * Bitwise rotate a 32-bit number to the left.  
 */    
function rol(num, cnt)    
{    
  return (num << cnt) | (num >>> (32 - cnt))    
}    
    
/*  
 * These functions implement the four basic operations the algorithm uses.  
 */    
function cmn(q, a, b, x, s, t)    
{    
  return safe_add(rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)    
}    
function ff(a, b, c, d, x, s, t)    
{    
  return cmn((b & c) | ((~b) & d), a, b, x, s, t)    
}    
function gg(a, b, c, d, x, s, t)    
{    
  return cmn((b & d) | (c & (~d)), a, b, x, s, t)    
}    
function hh(a, b, c, d, x, s, t)    
{    
  return cmn(b ^ c ^ d, a, b, x, s, t)    
}    
function ii(a, b, c, d, x, s, t)    
{    
  return cmn(c ^ (b | (~d)), a, b, x, s, t)    
}    
    
/*  
 * Calculate the MD5 of an array of little-endian words, producing an array  
 * of little-endian words.  
 */    
function coreMD5(x)    
{    
  var a =  1732584193    
  var b = -271733879    
  var c = -1732584194    
  var d =  271733878    
    
  for(var i = 0; i < x.length; i += 16)    
  {    
    var olda = a    
    var oldb = b    
    var oldc = c    
    var oldd = d    
    
    a = ff(a, b, c, d, x[i+ 0], 7 , -680876936)    
    d = ff(d, a, b, c, x[i+ 1], 12, -389564586)    
    c = ff(c, d, a, b, x[i+ 2], 17,  606105819)    
    b = ff(b, c, d, a, x[i+ 3], 22, -1044525330)    
    a = ff(a, b, c, d, x[i+ 4], 7 , -176418897)    
    d = ff(d, a, b, c, x[i+ 5], 12,  1200080426)    
    c = ff(c, d, a, b, x[i+ 6], 17, -1473231341)    
    b = ff(b, c, d, a, x[i+ 7], 22, -45705983)    
    a = ff(a, b, c, d, x[i+ 8], 7 ,  1770035416)    
    d = ff(d, a, b, c, x[i+ 9], 12, -1958414417)    
    c = ff(c, d, a, b, x[i+10], 17, -42063)    
    b = ff(b, c, d, a, x[i+11], 22, -1990404162)    
    a = ff(a, b, c, d, x[i+12], 7 ,  1804603682)    
    d = ff(d, a, b, c, x[i+13], 12, -40341101)    
    c = ff(c, d, a, b, x[i+14], 17, -1502002290)    
    b = ff(b, c, d, a, x[i+15], 22,  1236535329)    
    
    a = gg(a, b, c, d, x[i+ 1], 5 , -165796510)    
    d = gg(d, a, b, c, x[i+ 6], 9 , -1069501632)    
    c = gg(c, d, a, b, x[i+11], 14,  643717713)    
    b = gg(b, c, d, a, x[i+ 0], 20, -373897302)    
    a = gg(a, b, c, d, x[i+ 5], 5 , -701558691)    
    d = gg(d, a, b, c, x[i+10], 9 ,  38016083)    
    c = gg(c, d, a, b, x[i+15], 14, -660478335)    
    b = gg(b, c, d, a, x[i+ 4], 20, -405537848)    
    a = gg(a, b, c, d, x[i+ 9], 5 ,  568446438)    
    d = gg(d, a, b, c, x[i+14], 9 , -1019803690)    
    c = gg(c, d, a, b, x[i+ 3], 14, -187363961)    
    b = gg(b, c, d, a, x[i+ 8], 20,  1163531501)    
    a = gg(a, b, c, d, x[i+13], 5 , -1444681467)    
    d = gg(d, a, b, c, x[i+ 2], 9 , -51403784)    
    c = gg(c, d, a, b, x[i+ 7], 14,  1735328473)    
    b = gg(b, c, d, a, x[i+12], 20, -1926607734)    
    
    a = hh(a, b, c, d, x[i+ 5], 4 , -378558)    
    d = hh(d, a, b, c, x[i+ 8], 11, -2022574463)    
    c = hh(c, d, a, b, x[i+11], 16,  1839030562)    
    b = hh(b, c, d, a, x[i+14], 23, -35309556)    
    a = hh(a, b, c, d, x[i+ 1], 4 , -1530992060)    
    d = hh(d, a, b, c, x[i+ 4], 11,  1272893353)    
    c = hh(c, d, a, b, x[i+ 7], 16, -155497632)    
    b = hh(b, c, d, a, x[i+10], 23, -1094730640)    
    a = hh(a, b, c, d, x[i+13], 4 ,  681279174)    
    d = hh(d, a, b, c, x[i+ 0], 11, -358537222)    
    c = hh(c, d, a, b, x[i+ 3], 16, -722521979)    
    b = hh(b, c, d, a, x[i+ 6], 23,  76029189)    
    a = hh(a, b, c, d, x[i+ 9], 4 , -640364487)    
    d = hh(d, a, b, c, x[i+12], 11, -421815835)    
    c = hh(c, d, a, b, x[i+15], 16,  530742520)    
    b = hh(b, c, d, a, x[i+ 2], 23, -995338651)    
    
    a = ii(a, b, c, d, x[i+ 0], 6 , -198630844)    
    d = ii(d, a, b, c, x[i+ 7], 10,  1126891415)    
    c = ii(c, d, a, b, x[i+14], 15, -1416354905)    
    b = ii(b, c, d, a, x[i+ 5], 21, -57434055)    
    a = ii(a, b, c, d, x[i+12], 6 ,  1700485571)    
    d = ii(d, a, b, c, x[i+ 3], 10, -1894986606)    
    c = ii(c, d, a, b, x[i+10], 15, -1051523)    
    b = ii(b, c, d, a, x[i+ 1], 21, -2054922799)    
    a = ii(a, b, c, d, x[i+ 8], 6 ,  1873313359)    
    d = ii(d, a, b, c, x[i+15], 10, -30611744)    
    c = ii(c, d, a, b, x[i+ 6], 15, -1560198380)    
    b = ii(b, c, d, a, x[i+13], 21,  1309151649)    
    a = ii(a, b, c, d, x[i+ 4], 6 , -145523070)    
    d = ii(d, a, b, c, x[i+11], 10, -1120210379)    
    c = ii(c, d, a, b, x[i+ 2], 15,  718787259)    
    b = ii(b, c, d, a, x[i+ 9], 21, -343485551)    
    
    a = safe_add(a, olda)    
    b = safe_add(b, oldb)    
    c = safe_add(c, oldc)    
    d = safe_add(d, oldd)    
  }    
  return [a, b, c, d]    
}    
    
/*  
 * Convert an array of little-endian words to a hex string.  
 */    
function binl2hex(binarray)    
{    
  var hex_tab = "0123456789abcdef"    
  var str = ""    
  for(var i = 0; i < binarray.length * 4; i++)    
  {    
    str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +    
           hex_tab.charAt((binarray[i>>2] >> ((i%4)*8)) & 0xF)    
  }    
  return str    
}    
    
/*  
 * Convert an array of little-endian words to a base64 encoded string.  
 */    
function binl2b64(binarray)    
{    
  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"    
  var str = ""    
  for(var i = 0; i < binarray.length * 32; i += 6)    
  {    
    str += tab.charAt(((binarray[i>>5] << (i%32)) & 0x3F) |    
                      ((binarray[i>>5+1] >> (32-i%32)) & 0x3F))    
  }    
  return str    
}    
    
/*  
 * Convert an 8-bit character string to a sequence of 16-word blocks, stored  
 * as an array, and append appropriate padding for MD4/5 calculation.  
 * If any of the characters are >255, the high byte is silently ignored.  
 */    
function str2binl(str)    
{    
  var nblk = ((str.length + 8) >> 6) + 1 // number of 16-word blocks    
  var blks = new Array(nblk * 16)    
  for(var i = 0; i < nblk * 16; i++) blks[i] = 0    
  for(var i = 0; i < str.length; i++)    
    blks[i>>2] |= (str.charCodeAt(i) & 0xFF) << ((i%4) * 8)    
  blks[i>>2] |= 0x80 << ((i%4) * 8)    
  blks[nblk*16-2] = str.length * 8    
  return blks    
}    
    
/*  
 * Convert a wide-character string to a sequence of 16-word blocks, stored as  
 * an array, and append appropriate padding for MD4/5 calculation.  
 */    
function strw2binl(str)    
{    
  var nblk = ((str.length + 4) >> 5) + 1 // number of 16-word blocks    
  var blks = new Array(nblk * 16)    
  for(var i = 0; i < nblk * 16; i++) blks[i] = 0    
  for(var i = 0; i < str.length; i++)    
    blks[i>>1] |= str.charCodeAt(i) << ((i%2) * 16)    
  blks[i>>1] |= 0x80 << ((i%2) * 16)    
  blks[nblk*16-2] = str.length * 16    
  return blks    
}    
    
/*  
 * External interface  
 */    
function hexMD5 (str) { return binl2hex(coreMD5( str2binl(str))) }    
function hexMD5w(str) { return binl2hex(coreMD5(strw2binl(str))) }    
function b64MD5 (str) { return binl2b64(coreMD5( str2binl(str))) }    
function b64MD5w(str) { return binl2b64(coreMD5(strw2binl(str))) }    
/* Backward compatibility */    
function calcMD5(str) { return binl2hex(coreMD5( str2binl(str))) }    
module.exports = {    
  hexMD5: hexMD5    
}

使用时引入脚本

1
var md5 = require('../util/md5.js') 

1
  password=md5.hexMD5(password);