微信小程序 --- 登录页面

时间：2018-03-02 20:49:30 收藏：0 阅读：1433

思路：在个人中心页面，首先判断全局的 app.js 里面的 globalData 里面的 is_login 状态，并且判断缓存数据中的 is_login 状态，如果都为真，就正常显示，如果有一个为假，就要到登录页面进行登录。

具体代码示例：

app.js：

//app.js
App({  
  globalData: {
    is_login:false,
    userInfo:{}
  }
})

登录页面：

<view class="com">
  <text>账号：</text>
  <input bindinput="username" placeholder="账号" />
</view>
<view class="com">
  <text>密码：</text>
  <input bindinput=‘userpassword‘ placeholder="密码" />
</view>
  <view class="com">
  <button bindtap="btnclick">提交</button>
</view>

//index.js
//获取应用实例
const app = getApp()
Page({
  data:{
    username:null,
    password:null,
  },
  username:function(e){
    this.setData({ username: e.detail.value});
  },
  userpassword:function(e){
    this.setData({ password: e.detail.value });
  },
  btnclick:function(){
    var that = this;
    wx.request({
      url: ‘http://127.0.0.1/testjs/test1.php‘,
      data:{
        username:that.data.username,
        password:that.data.password,
      },
      method:‘GET‘,
      success:function(res){
        app.globalData.is_login = true;
        app.globalData.userInfo = res.data;
        // 如果需要缓存用户信息，最好是对用户信息进行加密后进行存储
        var currentUserInfo = {"is_login":true,"username":that.data.username,"password":that.data.password};
        try{
          wx.setStorage({
            key: ‘currentUserInfo‘,
            data: currentUserInfo,
          })
        }catch(e){};
        wx.switchTab({
          url: ‘../personal/personal‘,
        });
      }
    })
  },
})

个人中心页面：

personal.wxml

<view>你好！{{currentUser}}</view>

personal.js：

//获取应用实例
const app = getApp()
Page({
  data: {
    currentUser:null
  },
  onLoad: function (options){
    var that = this;
    // 判断缓存中 登录状态
    var isLogin = false;
    try{
      var value = wx.getStorageSync("currentUserInfo");
      if(value){
        isLogin = value.is_login;
      };
    }catch(e){};
    // 判断 app.json中登录状态
    if (!app.globalData.is_login && !isLogin){
      wx.redirectTo({
        url: ‘../login/login‘,
      });
      return false;
    };
    that.setData({ currentUser: app.globalData.userInfo.username});
  },
})