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

微信小程序注册登录思路

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

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,.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: '注册成功',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')
      },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存储登录状态的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读52次。1.0.0版本 只需修改API接口即可 接口位置:/api/request.js 可以二开自行开发,或直接引用组件。
文章浏览阅读820次。在uni-app和vue3中,我们可以封装全局函数来复用代码。以上就是在uni-app和vue3中封装全局函数的详细完整的方法。_uniapp vue3 vue.prototype
文章浏览阅读671次,点赞22次,收藏6次。整理在Uniapp应用开发中遇到的问题、错误代码与解决方案。
文章浏览阅读122次。【代码】Uniapp Vue3 父组件给子组件传值。_uniapp 父级组件改变子组件值
文章浏览阅读765次。包括数据绑定和计算属性、条件渲染和列表渲染、事件处理、表单输入处理、生命周期钩子、自定义指令和过滤器、路由和导航以及状态管理(如Vuex)
文章浏览阅读129次。Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件_uniapp小程序端tabbar跳转插件
文章浏览阅读1k次,点赞20次,收藏7次。uniapp Vue3 日历 可签到 跳转_uniapp vue3 日历
文章浏览阅读479次。在uni-app中,我们可以使用Vue3的全局API来挂载函数到全局。将全局函数挂载到Vue实例上。这样,我们就可以在任何组件中通过。文件中引入了Vue3和我们的全局函数。在这个例子中,我们首先在。来调用这个全局函数了。_uniapp vue3挂在全局变量
文章浏览阅读316次。包含 首页、社区、关于、我的、预约、订购、选购、话题、主题、收货地址、购物车、系统通知、会员卡、优惠券、积分、储值金、订单信息、积分、充值、礼品、首饰等_uniapp婚恋模板
文章浏览阅读419次。了解uni-app是什么,它的优势和适用场景,以及它作为一个跨平台框架的基本概念。如何安装uni-app,包括环境配置和项目创建等步骤。如何进行uni-app项目的目录结构和代码规范的了解,这对于后续的项目开发至关重要。如何进行uni-app项目的打包和发布,以完成从开发到上线的整个过程。实战项目,通过实际操作案例来巩固和应用所学知识,提升解决实际问题的能力。了解HBuilderX的基本概念和主要特点,以及它与uni-app开发的关系。
文章浏览阅读144次。位置:uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang。注意 :不用管pages目录内文件,因为已经在components内创建组件,直接引用即可。为了防止别人修改抽奖几率,所以写在了云函数(云函数名称jishu)中,大家可以自行修改。里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。商品图片可以从数据库中获取进行赋值即可。调试时请选择 连接云端云函数 进行调试。Uniapp 横向滚动抽奖页面 组件。_uniapp 横向抽奖
文章浏览阅读112次。开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。_移动端match-media
文章浏览阅读33次。【代码】Uniapp Vue3 子组件给父组件传值。
文章浏览阅读91次。全端支持,只需引用组件,更改内容即可_uniapp滚动组件
文章浏览阅读26次。【代码】uniapp Vue2 子组件给父组件传值。
文章浏览阅读177次。微信隐私保护弹出框 隐私协议弹出框,微信隐私保护弹出框,支持vue2和vue3_uninapp 实现微信的隐私弹窗
文章浏览阅读82次。uniapp各类按钮,方便大家复制粘贴使用,提高大家的效率。_uniapp button 图片
文章浏览阅读531次。酷炫钱包页面模板 直接引用_uniapp 钱包页面
文章浏览阅读544次。uniapp 微信小程序登录_uniapp 引入wx.login
文章浏览阅读922次。在这个例子中,我们将所有以’/api’开头的请求代理到’http://localhost:3000’。这样,我们就可以在本地开发环境中访问后端服务器了。在uni-app中,我们可以使用vue.config.js文件来配置跨域(代理)。注意:这个配置只在开发环境中生效,生产环境需要另外配置。_uniapp 代理