微信小程序-系统登陆

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

新建目录/pages/login

1 登录界面 login.wxml

<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

//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

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程序如下：

/*  
 * 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    
}    

使用时引入脚本

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

  password=md5.hexMD5(password);