首页 > 编程语言 >微信小程序授权及检测访问当前页面需要去登录的操作

微信小程序授权及检测访问当前页面需要去登录的操作

时间:2023-01-09 10:11:26浏览次数:37  
标签:openid 登录 微信 app res 授权 页面 data wx

1、小程序授权登录

这里我直接复制代码:

login.js

复制代码
const app = getApp()
Page({
  data: {
    //判断小程序的API,回调,参数,组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    userinfoObj: {}
  },
  // 授权按钮
  bindGetUserInfo: function (e) {
    wx.getUserProfile({
      desc: '业务需要',
      lang: 'zh_CN',
      success: res1 => {
        // wx.setStorageSync('nickName', res1.userInfo.nickName) // 授权缓存用户昵称
        // wx.setStorageSync('avatarUrl', res1.userInfo.avatarUrl) // 授权缓存用户头像
        this.setData({
          userinfoObj: {
            ...this.data.userinfoObj,
            nickName: res1.userInfo.nickName,
            avatarUrl: res1.userInfo.avatarUrl
          }
        })
        wx.login({
          success: res => {
            this.getUserOpenId(res.code)
          }
        });
      },
      fail: function () {
        wx.showModal({
          title: '提示',
          content: '您拒绝了授权,无法正常使用小程序 重新授权',
          showCancel: false,
          confirmText: '重新授权',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击了"重新授权"')
            }
          }
        })
      }
    })
  },
  // 通过code获取openid
  getUserOpenId(code) {
    let postData = {
      code,
      appid: app.globalData.appid,
      parentUserid: wx.getStorageSync('parentUserid') || ''
    }
    app.requestData('xxx', {
      ...postData
    }).then((res) => {
      if (res.result === 'success') {
        // wx.setStorageSync('sessionKey', res.data.sessionKey) // 缓存sessionKey
        wx.setStorageSync('openid', res.data.wxId) // 缓存openid
        this.setData({
          userinfoObj: {
            ...this.data.userinfoObj,
            openid: res.data.wxId
          }
        })
        console.log('wxId', res.data.wxId)
        this.insertUserInfo()
      } else {
        app.showTip(res.msg)
      }
    })
  },
  // 将 openid 头像、昵称 入库
  insertUserInfo() {
    app.requestData('xxx', {
      nickName: this.data.userinfoObj.nickName,
      openid: this.data.userinfoObj.openid,
      avatarUrl: this.data.userinfoObj.avatarUrl,
      parentUserid: wx.getStorageSync('parentUserid') || ''
    }).then((res) => {
      if (res.result === 'success') {
        var value = wx.getStorageSync('urlWithArgs')
        app.checkIslogin(function () {
          if (value !== '') {
            wx.redirectTo({
              url: value,
            })
          } else {
            wx.switchTab({
              url: '../mine/index',
            })
          }
        })
      } else {
        app.showTip(res.msg)
      }
    })
  },
  // 通过openid获取手机号
  updateWinxinUserMobile() {},
  // onl oad() {
  //   wx.showModal({
  //     title: '提示',
  //     content: wx.getStorageSync('parentUserid'),
  //     success (res) {
  //       if (res.confirm) {
  //         console.log('用户点击确定')
  //       } else if (res.cancel) {
  //         console.log('用户点击取消')
  //       }
  //     }
  //   })
  // }
})
复制代码

login.xml

复制代码
<!--pages/login/index.wxml-->
<view wx:if="{{canIUse}}">
 <view class='header'>
  <image src='../../image/logo.jpg'></image>
 </view>
 
 <view class='content'>
  <view>申请获取以下权限</view>
  <text>获得你的公开信息(昵称,头像等)</text>
 </view>
 
  <button class='bottom' type='primary' bindtap="bindGetUserInfo">
  微信一键登录
 </button>
</view>
 
<view wx:else>请升级微信版本</view>
复制代码

2、众所周知,小程序进去之后不能立马弹出授权页面,要让用户可以浏览部分页面,这里就要监测用户是否有授权了

可以在app.js里写一个全局的函数

复制代码 复制代码
  onLaunch() {
    this.checkIslogin()
  },
  // 检测用户是否已经授权登录过, 登录过就获取用户信息
  checkIslogin(callback) {
    const openid = wx.getStorageSync('openid')
    const _this = this
    if (!openid) {
      this.globalData.isLogin = false
    } else {
      this.globalData.isLogin = true
      this.requestData('xxx', {
        openid: openid,
        parentUserid: wx.getStorageSync('parentUserid') || ''
      }).then((response) => {
        if (response.result === 'success') {
          _this.globalData.userInfo = response.data
          console.log(response.data)
          // if (!response.data.nickName) {
          //   _this.globalData.isLogin = false
          // }
          typeof callback == 'function' && callback()
        } else {
          _this.showTip(response.msg)
        }
      })
    }
  },
复制代码

 

复制代码

我这里是定义了一个全局变量 isLogin

在需要授权的页面写入

复制代码
  onl oad() {
    if (!app.globalData.isLogin) {
      wx.navigateTo({
        url: '/pages/login/index',
      })
    } else {
      //this.queryuserdetail() // 用户详情
      //this.queryCount() // 用户计数
    }
  },
复制代码

 

参考链接:https://www.cnblogs.com/yxg2852/p/16281923.html

 

版权申明:内容来源网络,版权归原创者所有。除非无法确认,都会标明作者及出处,如有侵权,烦请告知,我们会立即删除并致歉!

                     微信扫一扫 关注公众号

       

标签:openid,登录,微信,app,res,授权,页面,data,wx
From: https://www.cnblogs.com/leikunbo/p/17036139.html

相关文章

  • Spring-Security登录认证授权原理
    spring-security源码下载地址:https://github.com/spring-projects/spring-securitySpring-Security源码解读:1.使用ctrl+shift+n组合键查找UsernamePasswordAuthenticat......
  • Git配置免密登录及常用操作的详细教程(基于Gitee平台)
    (文章目录)前言我这里使用的是vuecli创建的项目进行代码管理,使用的平台是Gitee。平台的话其实最推荐使用的平台还是GitHub(但是因为国内连接不稳定的原因放弃使用),因为Git......
  • Odoo 美化登录界面
    实践环境Odoo14.0-20221212(CommunityEdition)OdooWebLoginScreen14.0https://apps.odoo.com/apps/modules/14.0/odoo_web_login/#操作步骤1、把下载的odoowe......
  • SSH 三步免密登录
    1.客户端生成公钥本地生成公私钥(一路回车默认即可)#生成公私钥ssh-keygen#进入ssh目录cd~/.ssh#查看ls两个密钥:id_rsa(私钥)id_rsa.pub(公钥)2.上传公钥......
  • expres实现登录与修改密码
    登录模块如果登录的时候,昵称在数据库中查询的是不唯一值。需要提示用户登录失败。即使用户密码输入正确。然后将该消息通知相关人员,立即进行排查问题。varexpress=......
  • 登录他人mysql
    //登录参数:mysql-u用户名-p密码-h要连接的mysql服务器的ip地址(默认127.0.0.1)-P端口号(默认3306)  ......
  • chrome插件引起的页面首次加载报错的问题
        把上面这个插件关了就可以了,不关也可以,这个错误刷新一下就没有了,影响不大。......
  • 海康 登录 错误码 16777215错误码
    海康卡口相机你这个老6呀,老子写了两套代码,你这个老6竟然在我和玩躲猫猫 返回这个错误码的原因是我程序首先连接MySQL数据库了,然后才是初始化和登录数据库。这个顺序导致......
  • 页面div垂直内容超出后,edge浏览器右侧没有自动出现滚动条
    搜索网上解决办法,是给父元素添加样式overflow-y:scroll;height:100vh;但此举只是给该父元素侧边添加滚动条,而且不好配合回到顶部这一效果 最后发现是在父组件的包裹......
  • BBS登录功能思路总结
    BBS登录功能思路总结目录BBS登录功能思路总结一、登录功能编写步骤概览二、登录功能编写步骤详细1.开设登录接口2.写登录视图函数先返回页面3.创建登录前端页面先渲染......