程序授权登陆问题的解决途径及代码展示

why 504 2024-07-31

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

小程序授权登陆问题的解决途径及代码展示

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

场景

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

代码实现

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

1

2

3

4

5

6

7

{

"pages": [

    "pages/home/index"

    "pages/login/index",

     ...

   ]

}

login.js逻辑进入页面判断一下是不是授权过,判断用户是否已经授权,已经授权显示登陆,没有授权显示授权,用户无论是注册还是登陆用的是后台提供的同一个接口。返回token存在本地
login.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

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。
先判断有没有授权,没有授权显示点击授权,有授权显示点击登录,调用的方法都是wechatSignUp,拿到wx.login的code和wx.getUserInfo的数据给后台,然后后台返回token,然后再去访问后台获取用户信息
login的逻辑大概就是这些
login.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<view>

  <view>

    <view>

      <image></image>

      <text>商城</text>

    </view>

    <view>

      <view>请同意授权</view>

      <view>请登录</view>

      <view>

        <view>为了让头号买手可以更好的为您服务</view>

      </view>

    </view>

    <button>确认授权</button>

    <button>确认登录</button>

  </view>

  <view>

    <image></image>

    <view>近期你已经授权登陆过商城</view>

    <view>自动登录中</view>

  </view></view>

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

结束

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序引导用户授权的思路与项目实现方法及代码剖析
下一篇:探索奶茶小程序的开发之旅
相关文章

 发表评论

暂时没有评论,来抢沙发吧~