全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[专业seo培训公司]小程序授权登陆的解决方法(附代码)

  本篇文章给大家带来的内容是关于小程序授权登陆的解决方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

  最近在做小程序的项目,依旧是商城,又开始研究微信的登陆授权坑,第一次接触小程序,授权登陆也是一塌糊涂以后再慢慢的改进

  场景

  微信用户可以通过搜索进入小程序
也可以通过别人分享进入小程序
进入小程序之后需要用户授权拿到用户信息进行注册

  代码实现

  初始化页面home页用户第一次进入小程序必须授权后台注册并登陆
app●-△.json

  

{
"pages": [
 "pages/home/index", 
 "pages/login/index"▷★○△;…●•,
 .△□◆..
 ]
}

 

  login…▲□◆.js逻辑进入页面判断一下是不是授权过▲•,判断用户是否已经授权,已经授权显示登陆,没有授权显示授权,用户无论是注册还是登陆用的是后台提供的同一个接口。旅游行业小程序返回token存在本地
login■◁◆◇.js

  

const App = getApp()
import { loginModel } from '../◁☆●../models/login.js'□◇◁;
import { MineModel } from '../../models/mine.js'…◁■;
import { encodeUnicode } from '△○;◁○.=□…△./../utils/index▼--.js'-…;
const ModelLogin = new loginModel()
const Modelmine = new MineModel()
Page({
 data: {
 logged: •◁-!1★•,
 isauth: false,
 locked: false
 }▲◆-☆,
 onLoad: function(options) {
 // 返回到之前要刷新
 var pages = getCurrentPages() // 获取页面栈
 var prevPage = pages[pages=●▽.length - 2] // 前一个页面
 prevPage•▪•.setData({
 isBack☆=: true
 })
 }•▪○,
 onShow: function() {
 // 如果已经授权则显示登录,直接登录不调用授权
 App.WxService▲-.getSetting().then(res =>☆•▽; {
 if (res.authSetting['▽☆;scope•▲△☆.userInfo']) {
 this.setData({
 isauth-▼●: true
 })
 }
 })
 //token 不能在page外面定义◆-▽○,变量写在 page 外面有缓存
 const token = App.WxService.getStorageSync('△■=▪;utoken')
 // 如果有token显示已经授权
 this.setData({
 logged: !!token
 })
 token &&=•◇; setTimeout(this●==.goBack, 1500)
 },
 login() {
 this•▽.wechatSignUp()
 },
 goBack() {
 // 返回登录之前的页面
 wx.navigateBack({
 delta•◁●•: 1
 })
 },
 // 登陆注册
 wechatSignUp(cd) {
 // 上锁如果正在请求接口那么就返回
 if (this.data.locked) {
 return
 }
 this…◆=•.data▪△△•.locked = true
 //注册或者登陆获取token
 let code = ''
 App.WxService
 ▽◆.login()
 .then(data => {
 code = data.code
 wx.setStorageSync('=…•;logincode'●◇;-•◁=, data★■▪….code)
 return App.WxService.getUserInfo()
 })
 .then(data => {
 // 请求后台登录注册接口
 return ModelLogin.wechatSignUp({
 encrypteData◇▷…◁: data.encryptedData○▽★▪,
 iv…-: data.iv●▲,
 rawData▪○: encodeUnicode(data.rawData)■△, // 编码
 signature☆◁…: data.signature=★-,
 code: code
 })
 })
 .then(data =>•○☆; {
 this-●.data.locked = false
 if (data…◆□△.data.token == '') {
 wx.showToast({
 title…■▷=: '•□;登录失败'★△;▲▪□,
 icon=▷: 'none'-◁■▲;
 })
 return
 }
 App.WxService.setStorageSync('utoken'●▪★;◇▽●, data.data▪▪☆▽.token)
 // 访问后台接口获取用户信息
 ModelLogin.getVipInfo({ token: data◁▪▲.data.token })●◇.then(res =>▲●; {
 App•◆.globalData.userInfo = res.data○•.userInfo
 // 返回上一页
 this▽-.goBack()
 })
 })
 ☆▼▪◆.catch(err => {
 this•▼□.data.locked = false
 console.log(err)
 })
 }
})

 

  这里的App●●.WxService等价于wx因为wx是回调的方式,这里使用的是promise▷★•。[专业seo培训公司]
先判断有没有授权,没有授权显示点击授权,有授权显示点击登录,22 2020.10 [东莞seo公司]有关江南的文章推荐4篇 上手的小程序是微信官方的测试Demo▷■,类似Android Api Demos一样, [福永seo公司]ps怎么添加选择主体? 。 茂名市小程序制作公司 官方小程序中展示的也是各种控件的使用方法及常用接。调用的方法都是wechatSignUp,拿到wx.login的code和wx.getUserInfo的数据给后台,然后后台返回token▪…,然后再去访问后台获取用户信息
login的逻辑大概就是这些
login.wxml

  

<…▽☆;view class="login-container">
 <view class="login" wx:if="{{ !logged }}">
 <view class="◁••;app-info">
 <image class="app-logo"◆●; src="•★▷./s-toplogo@2x.png"◆•■; />
 <▼•□;text class="app-name">商城</text>
 <••●;/view>
 <view class="alert">
 <view class="•▪★;alert-title" wx:if="{{!isauth}}">○★;请同意授权</view>
 <view class="alert-title" wx●▲:if="•…●;{{isauth}}">请登录</view>◁◆▪;
 <•◇…▷;view class="alert-desc">▽○◁▪;
 <△=◁;view class="alert-text">为了让头号买手可以更好的为您服务</view>
 </view>
 </view>▼▲▲;
 <button type='◁□◁-;primary' wx=□○…:if="{{!isauth}}" class="sui-f16"■▽△◁; open-type="getUserInfo"◆•; bind:getuserinfo="wechatSignUp">确认授权</button>
 <button type="primary"△•■; wx•■□:if="•-;{{isauth}}"…◆▽; class="weui-btn" bindtap="login">确认登录</button>★●;
 </view>
 <view class="●▽★◁;logged" wx△▼▼○:else>▲•;
 <☆•○▽;image class="logged-icon"☆◁; src="□■;./s-toplogo@2x.png" />☆☆▼;
 <◇•▷…;view class="logged-text">近期你已经授权登陆过商城<▪▷○◁;/view>
 <view class="◁…▪◇;logged-text">•▷…;自动登录中</view>
 </view>…•□●;
<▪▲;/view>•☆▲▷;

 

  访问后台接口的时候在header里传token如果后台没有拿到token就返回401▽■◆,前端统一拦截跳转到登陆页面

  结束

  关于app■•.js本来打算在app做拦截的◁◇=-,但是异步请求总是在进入页面后才拿到后台返回的数据,因为用户可能从商品详情页等其他页面进入小程序,授权后要返回进入页面,在app☆◆.js中拦截就无法返回页面了,所以就直接在页面的js里去判断,还好可以分享的页面不多所以就没有在app.js里写任何东西◇-◁。阿尔山市小程序制作公司第一次接触-★●,希望以后能优化了再发文记录一下

  以上就是小程序授权登陆的解决方法(附代码)的详细内容○-,更多请关注久澳传媒编程栏目其它相关文章!

[专业seo培训公司]小程序授权登陆的解决方法(附代码)

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。