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 相关文章推荐
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
了解javascript中let和var及const关键字的区别
May 24 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php mysql数据库操作类
2008/06/04 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JavaScript中this详解
2015/09/01 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
使用python实现knn算法
2017/12/20 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Django模板语言 Tags使用详解
2019/09/09 Python
如何在Python对Excel进行读取
2020/06/04 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
新闻学专业求职信
2014/07/28 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
python lambda 表达式形式分析
2022/04/03 Python