小程序实现登录功能

 更新时间:2022年09月08日 15:35:17   作者:沐小侠  
这篇文章主要为大家详细介绍了小程序实现登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现登录功能的具体代码,供大家参考,具体内容如下

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。

1、前端调用wx.login获取code,再调用后端接口传递code

注意:code是临时的,只有5分钟的使用时间,而且只能使用一次

2、后端用获取的code与微信接口服务换取openid(用户唯一标识)与session_key(可以用于解密私密信息encrydata,现在只能获取头像和昵称),然后生成一个自定义登录状态的token,自定义登录态与openid和session_keysession关联。

注意:不可以把解析出来的openid和session_key直接返回给前端,会造成信息安全问题

3、将token返回给前端

4、前端缓存token

5、用户登录时,登录接口获取到token,再调用其他接口时,拦截器进行拦截,如果token有效,则放行请求;如果token失效(不存在、过期、格式不正确等原因),则无法访问该接口,需要重新登录。

说明:如果觉得token验证太过复杂,也可以退而求其次,采用微信小程序自带的wx.checkSeesion检查下发的session_key是否过期(固定为两天)。

wx.checkSeesion是前端检查,非常方便,但是缺点也很明显:耗时长,通常需要300+ms ,另外前后端传递私密数据时,需要额外考虑数据安全问题(以openid为例,前端每次需要传递openid时,都需要先获取临时code,再传递给后端,后端再用code换取openid,开销极大),因此正式开发时极不建议使用wx.checkSeesion,token验证方式可以较好解决上述问题。

核心代码:

// pages/my/my.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        loginOk: false,
        userInfo: null
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //验证是否登录
        this.checklogin()
    },
    checklogin() {
        const token = wx.getStorageSync('token')
        const that = this
        if (token) {
            wx.request({
                url: 'http://127.0.0.1:3000/checklogin',
                method: 'get',
                data:{
                    token:token
                },
                success(res) {
                    that.setData({ 
                        loginOk: res.data.is_login,
                        userInfo: res.data.userInfo
                     })
                }
            })
        } else {
            that.setData({ loginOk: false })
        }
    },
    login() {
        const that = this
        // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
        wx.getUserProfile({
            desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
            success(res){
                const userInfo = res.userInfo
                console.log(userInfo)
                // 登录
                wx.login({
                    success(res) {
                        if (res.code) {
                            //发起网络请求
                            wx.request({
                                url: 'http://127.0.0.1:3000/getSession',
                                method: 'post',
                                data: {
                                    code: res.code,
                                    userInfo:userInfo
                                },
                                success(res) {
                                    // 将token保存到数据缓存(下次打开小程序无需重新获取token)
                                    wx.setStorageSync('token', res.data.token)
                                    that.setData({ 
                                        loginOk: true,
                                        userInfo: userInfo
                                     })
                                }
                            })
                        }
                    }
                })
            }
        })
    },
    //退出登录
    exit() {
        wx.showModal({
            content: "确定退出吗"
        }).then(res => {
            if (res.confirm) {
                this.setData({
                    loginOk: false
                })
                //清空登录的缓存
                wx.removeStorageSync('token')
            } else if (res.cancel) {
                wx.showToast({
                  title: '取消',
                  icon:'error'
                })
            }
        })
    }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS传参及动态修改页面布局

    JS传参及动态修改页面布局

    本篇文章主要介绍了JS传参及动态修改页面布局的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 微信小程序实现上传图片功能

    微信小程序实现上传图片功能

    这篇文章主要为大家详细介绍了微信小程序实现上传图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • JavaScript的History API使搜索引擎抓取AJAX内容

    JavaScript的History API使搜索引擎抓取AJAX内容

    这篇文章主要介绍了JavaScript的History API使搜索引擎抓取AJAX内容 的相关资料,需要的朋友可以参考下
    2015-12-12
  • javascript定时保存表单数据的代码

    javascript定时保存表单数据的代码

    我相信有不少TX用过QQ或163的邮箱吧?他们中有一个比较有用且有趣的功能,如果您在编写邮件,那在固定一个时间频率内,它会自动将您的邮件内容保存起来,以免丢失。
    2011-03-03
  • JavaScript中双叹号(!!)作用示例介绍

    JavaScript中双叹号(!!)作用示例介绍

    这篇文章主要介绍了JavaScript中双叹号(!!)的作用,需要的朋友可以参考下
    2014-04-04
  • uniapp获取底部安全距离以及状态栏高度等

    uniapp获取底部安全距离以及状态栏高度等

    最近在用uniapp开发的时候遇到了一些问题,下面这篇文章主要给大家介绍了关于uniapp获取底部安全距离以及状态栏高度等的相关资料,需要的朋友可以参考下
    2022-10-10
  • js常用函数push()、pop()、shift()、unshift()、slice()和splice()等详解

    js常用函数push()、pop()、shift()、unshift()、slice()和splice()等详解

    这篇文章主要给大家介绍了关于js常用函数push()、pop()、shift()、unshift()、slice()和splice()等的相关资料,js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧,需要的朋友可以参考下
    2023-11-11
  • Bootstrap每天必学之面板

    Bootstrap每天必学之面板

    Bootstrap每天必学之面板,面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能,对面板感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js控制TR的显示隐藏

    js控制TR的显示隐藏

    在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,如何控制,本文为大家揭晓
    2016-03-03
  • JavaScript中call,apply,bind的区别与实现

    JavaScript中call,apply,bind的区别与实现

    这篇文章主要介绍了JavaScript中call,apply,bind的区别与实现,文章通过围绕主题思想展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09

最新评论