WeChat 애플릿 개발 로그인 인증 기능

이 글은 위챗 미니 프로그램에서 로그인 인증 기능을 개발하는 방법을 소개합니다. 미니 프로그램 개발을 배우고 있는 친구들에게 도움이 되었으면 좋겠습니다!

WeChat 애플릿 개발 로그인 확인 기능

요구 사항 설명:

사용자가 로그인하지 않은 페이지에 로그인 확인을 추가하면 해당 페이지가 자동으로 로그인 페이지로 리디렉션됩니다. 로그인 확인이 성공한 후 로그인 시작 페이지로 다시 전화하세요.

추천 학습: 미니 프로그램 개발

구현 아이디어:

현재 로그인한 사용자 개체(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이 반환되면 대체 메소드가 호출됩니다. wx.redirectTo의 url 매개변수에는 상대 경로가 필요하기 때문입니다. 그래서 여기서 변환했습니다.

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 데이터에 값을 할당합니다.

PHP 중국어 웹사이트, 수많은 thinkphp 튜토리얼, 학습을 환영합니다!

위 내용은 WeChat 애플릿 개발 로그인 인증 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!