uni-app微信小程序登录并使用vuex存储登录状态的思路详解


Posted in Javascript onNovember 04, 2019

微信小程序注册登录思路

(这是根据自身的项目的思路,不一定每个项目都适用)

1.制作授权登录框,引导用户点击按钮

2.uni.login获取code

3.把code传给后端接口,后端返回如下数据

openid: "ogtVM5RWdfadfasdfadfadV5s"
status: 1
// 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册)

4.判断用户是否注册,并调用用户信息接口

(1)若已注册则提示登录成功,并调用后台给的获取用户信息的接口,并把数据保存到vuex

(2)若未注册则调用注册接口,注册成功之后调获取用户信息接口,并把数据保存到vuex

制作授权登录框

我把它写到一个组件里,在需要调用的页面注册该组件

authorization.vue组件

<template>
  <view class="pop">
    <view class="pop-main">
      <i class="iconfont cancel" @click="cancel">?</i>
      <view class="pop-title">需要您的授权</view>
      <view class="pop-text">
        <view>为了提供更好的服务</view> 
        <view>请在稍后的提示框中点击允许</view>
      </view>
      <image class="pop-imgsize" src="../static/images/aut.png" mode=""></image>
      <!-- 微信小程序的引导按钮,可以获取到用户信息 getuserinfo函数调用请求下面会讲到-->
      <button type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">我知道了</button>
    </view>
  </view>
</template>

<script>
  import app from '../common/config.js'
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      getuserinfo(res) {
      // 调用封装在app的_getuserinfo函数,_getuserinfo函数执行用户获取code,传code给后台,调用注册接口
        app._getuserinfo(res)
      },
      cancel() {
        this.$emit('cancelChild',false)
      }
    }
  }
</script>

<style scoped>
.pop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.3);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop-main {
  width: 690upx;
  height: 800upx;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 20upx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  padding: 64upx 0upx 40upx 0upx;
}
/* 删除按钮 */
.cancel {
  position: absolute;
  top: 20upx;
  right: 20upx;
  font-size: 20px;
}
.pop-title {
  padding-bottom: 40upx;
  width: 100%;
  border-bottom: 1px solid #BFBFBF;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
}
.pop-imgsize {
  width: 484upx;
  height: 406upx;
}
.pop-text {
  width: 75%;
  text-align: center;
  font-size: 15px;
  margin: 30upx 0upx;
  letter-spacing: 1px;
}
button {
  background-color: #08BF00;
  color: #FFFFFF;
  text-align: center;
  height: 88upx;
  line-height: 88upx;
  font-size: 14px;
  border-radius: 50upx;
  width: 78%;
}
</style>

在个人中心页注册该组件

<template>
  <view>
    <view class="info" >
      <image 
        @click="toSettings" 
        class="headimg" 
        :src="userinfo.headimgurl || defaultHeadimg" 
        >
      </image>
      <text v-if="!hasLogin" class="goLogin" @click="gologin">登录</text>
      <text v-if="hasLogin">{{userinfo.nickname}}</text>
      <text v-if="hasLogin && userinfo.mobile" class="phone">{{userinfo.mobile}}</text>
    </view>
    <authorization v-if="tologin && !hasLogin" @cancelChild="getChild"></authorization>
  </view>
</template>

uni-app微信小程序登录并使用vuex存储登录状态的思路详解 

点击"我知道了"按钮,调用封装_getuserinfo的请求

新建config.js,在config封装请求

import store from '@/store'
const app = {
  apiUrl: 'https://aaa.bbbbb.com/', //请求的地址
  openidRequest(obj) {
    try {
      const openid = uni.getStorageSync('openid');
      if (openid) {
        if(obj.data) {
          obj.data["openid"] = openid;
        } else {
          obj.data = {"openid": openid};
        }
        obj.url = this.apiUrl + obj.url;
        uni.request(obj)
      } else {
        console.log("获取不到openid")
      }
    } catch (e) {
      console.log(e)
      console.log("获取不到openid")
    }
  },
  _getuserinfo(res) {
    var that = this
    var userinfoDetails = {} // 注册时,需要把用户信息传给后台,所以定义一个对象存储获取到的用户信息
    userinfoDetails = res.detail.userInfo 
    uni.getUserInfo({
     provider: 'weixin',
     success: function () {
      uni.login({
        success:function(res){
          uni.showLoading({
            title: '登陆中...',
            mask: false
          });
          uni.request({
            url: that.apiUrl + 'sdafl/ddfax/dfadf?code=' + res.code, //把code传给后台,后台返回openid和status
            success: (res) => {
              console.log(res)
              if (res.data.openid) {
                uni.setStorageSync('openid', res.data.openid)
                userinfoDetails.openid = res.data.openid
                //处理一下属性名传递给后台
                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/avatarUrl/g, "headimgurl"));
                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/gender/g, "sex"));
                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/nickName/g, "nickname"));
                delete userinfoDetails.language;
                userinfoDetails.ppid = store.state.ppid || ''
                console.log(userinfoDetails)
              }
              // 当status==0时说明用户还没有注册需要注册
              if(res.data.status == 0) {
                that.sendInfo(userinfoDetails) // 调用注册接口,并把用户信息userinfoDetails传给后台
                console.log('我还没有注册')
              } else if (res.data.status == 1) {
                uni.showToast({
                  title: '登录成功',
                  icon: 'success',
                  duration: 2000
                })
                that.getUserData() // 调用获取用户信息的接口
              } else {
                uni.hideLoading()
                uni.showToast({
                  title: '登录失败',
                  duration: 2000,
                  icon:'none'
                })
              }
            }
          })
        }
      })
     }
    });
  },
  // 注册接口
  sendInfo(userinfoDetails) {
    var that = this
    uni.request({
      url: this.apiUrl + 'fdafd/ifdaffdex/fdaff',
      data: userinfoDetails,
      method: 'POST',
      success: (res) => {
        if(res.data.userinfo == 1) {
          uni.hideLoading()
          uni.showToast({
            title: '注册成功',
            icon: 'success',
            duration: 2000
          })
          that.getUserData() // 调用获取用户信息的接口
        } else {
          uni.hideLoading()
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          })
        }
      }
    })
  },
  // 获取用户信息
  getUserData() {
    uni.request({
      url: this.apiUrl + 'sfad/dfadfad/idfadffde', 
      data: {
        openid: uni.getStorageSync('openid')
      },
      method: 'POST',
      success: (res) => {
        if(res.data.status == 1) {
          console.log(res.data)
          store.commit('login', res.data.user) // vuex的方法
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          })
        }
      }
    })
  }
}
export default app;

vuex存储登录态的方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    hasLogin: false,
    userinfo: {},
    ppid: '',
  },
  mutations: {
    // 登录
    login(state,res) {
      state.hasLogin = true
      state.userinfo = res
      uni.setStorage({
        key: 'userinfo',
        data: res
      })
      // console.log(state.userinfo)
      // console.log(state.hasLogin)
    },
    // 二维码ppid
    saveppid(state,ppid) {
      state.ppid = ppid
      uni.setStorage({
        key: 'ppid',
        data: ppid
      })
      // console.log(state.ppid)
    },
  },
})

export default store

uni-app微信小程序登录并使用vuex存储登录状态的思路详解 

总结

以上所述是小编给大家介绍的uni-app微信小程序登录并使用vuex存储登录状态的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jquery的回到页面顶部按钮
Jun 27 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
JavaScript判断浏览器版本的方法
Nov 03 #Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 #Javascript
如何正确理解vue中的key详解
Nov 02 #Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 #Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 #Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 #Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
vue监听滚动事件的方法
2020/12/21 Vue.js
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python如何在终端里面显示一张图片
2016/08/17 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
python打包生成so文件的实现
2020/10/30 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
工程师自我评价怎么写
2013/09/19 职场文书
大学生毕业鉴定
2014/01/31 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
django上传文件的三种方式
2021/04/29 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers