ltb8r.com

「用户登录」微信小程序登录验证实现

对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。

实现思路

创建一个全局变量来存储当前登录的用户对象(userInfo)、一个用于验证登录有效性的全局方法(checkLoginInfo())和一个用于获取当前页面的完整路径的全局方法(getCurrentUrl())。

对于需要添加登录限制的页面的page.onLoad事件,请调用checkLoginInfo()方法来确定当前的登录状态。 如果未登录,则该页面转到登录页面。

通过登录验证后,登录信息存储在全局变量userInfo中,并跳回到登录启动页面。

app.js

data:{
    userInfo:null,//用户登录存储对象
    loginUrl:"../login/login",
  },
  checkLoginInfo:function(url){//验证登录状态
    if(this.data.userInfo==null){
      return url;
    }else{
      return "";
    }
  },
  getCurrentUrl:function(){//获取当前页面全路径
    var url=getCurrentPages()[getCurrentPages().length-1].__route__;
    url=url.replace("eapdomain/src/pages","..");//替换路径全路径。修改该路径为相对路径
    return url;
  }

*注意:在getCurrentUrl方法中,最后返回url时,又调用了replace方法。因为wx.redirectTo的url参数要求为相对路径。所以在这里转换了一下。

login.wxml

<!--eapdomain/src/pages/login/login.wxml-->
<view>
   <text>登录页面</text>
</view>
<view>
   <text>用户名</text> <input type="text" placeholder="请输入用户名" bindinput="inputClick" id="loginName"></input>
</view>
<view>
   <text>密码</text> <input type="password" placeholder="请输入密码" bindinput="inputClick" id="passWord"></input>
</view>
<view>
   <button type="primary" catchtap="loginClick">登录</button>
</view>

login.js

// eapdomain/src/pages/login/login.js
var app=getApp();
Page({
  data:{
    backUrl:null,
    loginName:null,
    passWord:null
  },
  onLoad:function(options){
    this.setData({
      backUrl:null
    });
    // 页面初始化 options为页面跳转所带来的参数
    //console.log(options.backUrl);
    this.setData({
      backUrl:options.backUrl
    });
  },
  inputClick:function(event){
    //动态 对 paga.data 进行赋值
    //id与 数据项 一一对应
    var objId=event.currentTarget.id;
    
    var paraObj={};
    paraObj[objId]=event.detail.value;
    this.setData(paraObj);
    //console.log(event.currentTarget.id);
    //console.log(this.data);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  loginClick:function(){

    var loginName=this.data.loginName;
    var passWord=this.data.passWord;

    if(loginName!=null&&passWord!=null){
      var backUrl=this.data.backUrl;
      // wx.redirectTo({
      //   url:'eapdomain/src/pages/pageCreate/pageCreate'
      // })
      app.data.userInfo={
          loginName:loginName,
          passWord:passWord
        };

      wx.redirectTo({
        url: backUrl
      });

    //   wx.redirectTo({
    // //目的页面地址
    //       url: 'pages/logs/index',
    //       success: function(res){},
          
    //   })
    }else{
      this.setData({
        loginName:null,
        passWord:null
      });
    }
  }
})

*注意:这里inputClick事件。根据前台控件id为page.data数据进行赋值。

免责声明:本站所有PPT模板资源均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权益,请联系网站客服处理
本文地址:https://www.ltb8r.com/webseo/90.html
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 微信小程序 微信小程序开发组件初步使用和配置

    微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。…

    04-13 10:35 104
  • 微信小程序 「用户登录」微信小程序登录验证实现

    对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。…

    04-12 13:56 153
  • 微信小程序 「开发阶段」微信小程序基础教程

    要开发微信小程序之前,需要做一些准备工作,例如,下载微信开发者工具、创建本地小程序项目,这样我们就进行简单的微信小程序开发。…

    04-10 10:59 91
  • 微信小程序 「网络请求」微信小程序开发中的http请求总结

    微信小程序中的网络通信只能与指定的域名进行通信,微信小程序包括四种类型的网络请求。普通的HTTPS请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile)、WebSocket通…

    04-09 10:15 95
  • 微信小程序 「微信小程序」CSS3 弹性布局快速入门

    弹性布局是新一代的布局方法,在传统布局中使用浮动布局会给我们带来很多弊端,例如高度依赖HTML代码结构的CSS代码等,下面,我将使用一些示例让你快速学习弹性布局。…

    04-08 10:33 216