实现登录和用户信息组件的按需展示

在 my.vue 页面中，通过 mapState 辅助函数，导入需要的 token 字符串：

import badgeMix from '@/mixins/tabbar-badge.js'
// 1. 从 vuex 中按需导入 mapState 辅助函数
import { mapState } from 'vuex'export default {mixins: [badgeMix],computed: {// 2. 从 m_user 模块中导入需要的 token 字符串...mapState('m_user', ['token']),},data() {return {}},
}

在 my.vue 页面中，实现登录组件和用户信息组件的按需展示：

<template><view><!-- 用户未登录时，显示登录组件 --><my-login v-if="!token"></my-login><!-- 用户登录后，显示用户信息组件 --><my-userinfo v-else></my-userinfo></view>
</template>

10.2.3 实现登录组件的基本布局
为 my-login 组件定义如下的 UI 结构：

<template><view class="login-container"><!-- 提示登录的图标 --><uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons><!-- 登录按钮 --><button type="primary" class="btn-login">一键登录</button><!-- 登录提示 --><view class="tips-text">登录后尽享更多权益</view></view>
</template>

10.2.4 点击登录按钮获取微信用户的基本信息
需求描述：需要获取微信用户的头像、昵称等基本信息。

为登录的 button 按钮绑定 open-type=“getUserInfo” 属性，表示点击按钮时，希望获取用户的基本信息：

<!-- 登录按钮 -->
<!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
// 在 methods 节点中声明 getUserInfo 事件处理函数如下：
methods: {// 获取微信用户的基本信息getUserInfo(e) {// 判断是否获取用户信息成功if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')// 获取用户信息成功， e.detail.userInfo 就是用户的基本信息console.log(e.detail.userInfo)}
}

10.2.5 将用户的基本信息存储到 vuex
在 store/user.js 模块的 state 节点中，声明 userinfo 的信息对象如下：

// state 数据
state: () => ({// 收货地址// address: {}address: JSON.parse(uni.getStorageSync('address') || '{}'),// 登录成功之后的 token 字符串token: '',// 用户的基本信息userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),

在 store/user.js 模块的 mutations 节点中，声明如下的两个方法：

// 方法
mutations: {// 省略其它代码...// 更新用户的基本信息updateUserInfo(state, userinfo) {state.userinfo = userinfo// 通过 this.commit() 方法，调用 m_user 模块下的 saveUserInfoToStorage 方法，将 userinfo 对象持久化存储到本地this.commit('m_user/saveUserInfoToStorage')},// 将 userinfo 持久化存储到本地saveUserInfoToStorage(state) {uni.setStorageSync('userinfo', JSON.stringify(state.userinfo))}
}

使用 mapMutations 辅助函数，将需要的方法映射到 my-login 组件中使用：

// 1. 按需导入 mapMutations 辅助函数
import { mapMutations } from 'vuex'export default {data() {return {}},methods: {// 2. 调用 mapMutations 辅助方法，把 m_user 模块中的 updateUserInfo 映射到当前组件中使用...mapMutations('m_user', ['updateUserInfo']),// 获取微信用户的基本信息getUserInfo(e) {// 判断是否获取用户信息成功if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')// 获取用户信息成功， e.detail.userInfo 就是用户的基本信息// console.log(e.detail.userInfo)// 3. 将用户的基本信息存储到 vuex 中this.updateUserInfo(e.detail.userInfo)},},
}

10.2.6 登录获取 Token 字符串
需求说明：当获取到了微信用户的基本信息之后，还需要进一步调用登录相关的接口，从而换取登录成功之后的 Token 字符串。

在 getUserInfo 方法中，预调用 this.getToken() 方法，同时把获取到的用户信息传递进去：

// 获取微信用户的基本信息
getUserInfo(e) {// 判断是否获取用户信息成功if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')// 将用户的基本信息存储到 vuex 中this.updateUserInfo(e.detail.userInfo)// 获取登录成功后的 Token 字符串this.getToken(e.detail)
}

在 methods 中定义 getToken 方法，调用登录相关的 API，实现登录的功能：

// 调用登录接口，换取永久的 token
async getToken(info) {// 调用微信登录接口const [err, res] = await uni.login().catch(err => err)// 判断是否 uni.login() 调用失败if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')// 准备参数对象const query = {code: res.code,encryptedData: info.encryptedData,iv: info.iv,rawData: info.rawData,signature: info.signature}// 换取 tokenconst { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')uni.$showMsg('登录成功')
}

10.2.7 将 Token 存储到 vuex
在 store/user.js 模块的 mutations 节点中，声明如下的两个方法：

mutations: {// 省略其它代码...// 更新 token 字符串updateToken(state, token) {state.token = token// 通过 this.commit() 方法，调用 m_user 模块下的 saveTokenToStorage 方法，将 token 字符串持久化存储到本地this.commit('m_user/saveTokenToStorage')},// 将 token 字符串持久化存储到本地saveTokenToStorage(state) {uni.setStorageSync('token', state.token)}
}

修改 store/user.js 模块的 state 节点如下：// state 数据
state: () => ({// 收货地址address: JSON.parse(uni.getStorageSync('address') || '{}'),// 登录成功之后的 token 字符串token: uni.getStorageSync('token') || '',// 用户的基本信息userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),

在 my-login 组件中，把 vuex 中的 updateToken 方法映射到当前组件中使用：

methods: {// 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用...mapMutations('m_user', ['updateUserInfo', 'updateToken'])// 省略其它代码...// 调用登录接口，换取永久的 tokenasync getToken(info) {// 调用微信登录接口const [err, res] = await uni.login().catch(err => err)// 判断是否 uni.login() 调用失败if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')// 准备参数对象const query = {code: res.code,encryptedData: info.encryptedData,iv: info.iv,rawData: info.rawData,signature: info.signature}// 换取 tokenconst { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')// 2. 更新 vuex 中的 tokenthis.updateToken(loginResult.message.token)}
}

10.2.7 将 Token 存储到 vuex
在 store/user.js 模块的 mutations 节点中，声明如下的两个方法：

mutations: {// 省略其它代码...// 更新 token 字符串updateToken(state, token) {state.token = token// 通过 this.commit() 方法，调用 m_user 模块下的 saveTokenToStorage 方法，将 token 字符串持久化存储到本地this.commit('m_user/saveTokenToStorage')},// 将 token 字符串持久化存储到本地saveTokenToStorage(state) {uni.setStorageSync('token', state.token)}
}

修改 store/user.js 模块的 state 节点如下：

// state 数据
state: () => ({// 收货地址address: JSON.parse(uni.getStorageSync('address') || '{}'),// 登录成功之后的 token 字符串token: uni.getStorageSync('token') || '',// 用户的基本信息userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),

在 my-login 组件中，把 vuex 中的 updateToken 方法映射到当前组件中使用：

methods: {// 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用...mapMutations('m_user', ['updateUserInfo', 'updateToken'])// 省略其它代码...// 调用登录接口，换取永久的 tokenasync getToken(info) {// 调用微信登录接口const [err, res] = await uni.login().catch(err => err)// 判断是否 uni.login() 调用失败if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')// 准备参数对象const query = {code: res.code,encryptedData: info.encryptedData,iv: info.iv,rawData: info.rawData,signature: info.signature}// 换取 tokenconst { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')// 2. 更新 vuex 中的 tokenthis.updateToken(loginResult.message.token)}
}

实现登录和用户信息组件的按需展示相关推荐

CentOS下查看最后登录的用户信息以及LOG记录
CentOS下查看最后登录的用户信息 tail /var/log/messages tail /var/log/secure 我们知道,在redhat下可以用lastlog查看各用户最后登录的信息,用 ...
数据库中用户登录注册用户信息表怎么设计如何设计
用户登录站内登录:用户信息+密码的验证形式: 用户名+密码, 手机+密码, 站外授权:第三方登录, 其实它也是用户信息+密码的形式, 用户信息即第三方系统中的ID(第三方登录一定会给一个在他们系统中 ...
微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出问题解决办法
4月8号升级了小程序业务后提交了版本并上线.突然一个同事说体验版的点击"登录"按钮无效.当时觉得应该不会呀,这几天一直用手机调试,每天也在不停的登录授权,弹框一直有的呀.然后为了验 ...
微信小程序开发之——用户登录-获取用户信息(5)，意外收获字节跳动内部资料
{{userInfo.nickName}} {{userInfo.city}} {{userInfo.gender0?"未知":userInfo.gender1?"男&q ...
微信小程序授权登录获取用户信息详解
今天来说一下微信小程序的授权登录获取用户信息,首先我们看微信提供的小程序开发文档: https://blog.csdn.net/qq_41971087/article/details/82466647 ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...
Android之QQ授权登录获取用户信息
有时候我们开发的app需要方便用户简单登录,可以让用户使用自己的qq.微信.微博登录到我们自己开发的app. 今天就在这里总结一下如何在自己的app中集成QQ授权登录获取用户信息的功能. 首先我们打开 ...
小程序登录、用户信息相关接口调整说明
为优化用户的使用体验,平台将进行以下调整: 2021年2月23日起,若小程序已在微信开放平台进行绑定,则通过wx.login接口获取的登录凭证可直接换取unionID 2021年4月13日后发布的小 ...
vue展示信息卡片_vue实现登录和个人信息组件展示
最近在写一个重构node社区的小项目,碰到了登录的问题,实现思路如下: 1.获取用户表单信息,使用axios提交,提交成功后,把数据存在cookie,以便后续操作. 2.其中有个人信息的页面展示,获取 ...

实现登录和用户信息组件的按需展示

实现登录和用户信息组件的按需展示相关推荐

最新文章

热门文章