微信小程序(黑马优购:登录)
1.点击结算进行条件判断
user.js
//数据
state: () =>({
// address: {}
address: JSON.parse(uni.getStorageSync('address') || '{}'),
token: ''
}),
my-settle.vue
computed: {
...mapGetters('m_cart',['checkedCount','total','checkedGoodsAmount']),
...mapGetters('m_user',['addstr']),
...mapState('m_user',['token'])
//用户点击了结算按钮
settlement(){
if(!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')
if(!this.addstr) return uni.$showMsg('请选择收货地址')
if(!this.token) return uni.$showMsg('请先登录!')
}
2.创建登录(my-login)和用户信息组件(my-userinfo)
my-login.vue
//绘制底部半圆的造型
&::after{
content: ' ';
display: block;
width: 100%;
height: 40px;
background-color: white;
position: absolute;
bottom: 0;
left: 0;
border-radius: 100%;
//往下移50%
transform: translateY(50%);
}
3.登录授权
如果没有显示下面的弹框，基础库设置为最低版本即可
methods:{
//用户授权之后，获取用户的基本信息
getUserinfo(e){
console.log(e);
if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
}
}
3.将用户的基本信息存储到Vuex
//数据
state: () =>({
// address: {}
address: JSON.parse(uni.getStorageSync('address') || '{}'),
token: '',
//用户的信息对象
userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),
saveUserInfoToStorage(state){
uni.setStorageSync('userinfo',JSON.stringify(state.userinfo))
}
my-login.vue
<script>
import {mapMutations} from 'vuex'
export default {
data() {
return {
};
},
methods:{
...mapMutations('m_user',['updateUserInfo']),
//用户授权之后，获取用户的基本信息
getUserinfo(e){
if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
console.log(e.detail.userInfo);
this.updateUserInfo(e.detail.userInfo)
}
}
}
</script>
4.调用uni.login
1)拿到code值
//用户授权之后，获取用户的基本信息
getUserinfo(e){
if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
console.log(e.detail.userInfo);
this.updateUserInfo(e.detail.userInfo)
this.getToken(e.detail)
},
async getToken(info){
//获取code对应的值
const [err,res] = await uni.login().catch(err => err)
console.log(res);
if( err || res.errMsg !== 'login:ok'){
return uni.$showMsg('登录失败!')
}
console.log(res.code);
console.log(info);
}
user.js
token: uni.getStorageInfoSync('token') || '',
updateToken(state,token){
state.token = token
this.commit('m_user/saveTokenToStorage')
},
saveTokenToStorage(state){
uni.setStorage('token',state.token)
}
...mapMutations('m_user',['updateUserInfo','updateToken']),
2)持久化存储token
await uni.$http.post('/api/public/v1/users/wxlogin',query)这里的接口不能获取到token值，
直接把token写死
my-login.vue
data() {
return {
token : 'abc147258369jkl'
};
},
async getToken(info){
//获取code对应的值
const [err,res] = await uni.login().catch(err => err)
console.log(info);
if( err || res.errMsg !== 'login:ok'){
return uni.$showMsg('登录失败!')
}
console.log(res);
//准备参数
const query = {
code: res.code,
encryptedData: info.encryptedData,
iv: info.iv,
rawData: info.rawData,
signature: info.signature
}
const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin',query)
console.log(loginResult);
if(loginResult.meta.status !== 200 ) {
uni.$showMsg('登录成功')
uni.setStorageSync('token',this.token);
this.updateToken(this.token)
}
4.获取用户信息
渲染头像和名称
<view class="top-box">
<image :src="userinfo.avatarUrl" class="avatar"></image>
<view class="nickname">{{userinfo.nickname}}</view>
</view>
import { mapState } from 'vuex'
computed:{
...mapState('m_user',['userinfo'])
}
5.退出登录
methods:{
...mapMutations('m_user',['updateAddress','updateUserInfo','updateToken']),
async logout(){
const [err,succ] = await uni.showModal({
title: '提示',
content: '确认退出登录吗?'
}).catch(err => err)
if(succ && succ.confirm){
this.updateAddress({})
this.updateUserInfo({})
this.updateToken('')
}
}
6.如果用户没有登录，则3秒后自动跳转到登录页面
my-settle.vue
return {
//倒计时的秒数
seconds: 3,
//定时器的Id
timer: null
};
//延时导航到my页面
delayNavigate(){this.seconds = 3
this.showTips(this.seconds)
this.timer = setInterval(()=>{
this.seconds--
if(this.seconds <= 0){
clearInterval(this.timer)
uni.switchTab({
url: '/pages/my/my'
})
return
}
this.showTips(this.seconds)
},1000)
},
//展示倒计时的提示消息
showTips(n){
uni.showToast({
icon: 'none',
title: '请登录后再结算! '+n+' 秒之后自动跳转到登录页',
mask: true,
duration: 1500
})
7.登录成功之后再返回之前的页面
user.js
//重定向的Object对象
redirectInfo: null
updateRedirectInfo(state,info){
state.redirectInfo = info
console.log(state.redirectInfo);
}
my-login.vue
computed:{
...mapState('m_user',['redirectInfo'])
},.methods:{
...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
if(loginResult.meta.status !== 200 ) {
uni.$showMsg('登录成功')
this.updateToken('abc147258369jkl')
this.navigateBack()
}
navigateBack(){
// this.redirectInfo.openType === 'switchTab':重定向的方式是switchTab
if(this.redirectInfo && this.redirectInfo.openType === 'switchTab'){
uni.switchTab({
url:this.redirectInfo.from,
complete: ()=>{
this.updateRedirectInfo(null)
}
})
}
}
my-settle.vue
//延时导航到my页面
delayNavigate(){
this.seconds = 3
this.showTips(this.seconds)
this.timer = setInterval(()=>{
this.seconds--
if(this.seconds <= 0){
clearInterval(this.timer)
uni.switchTab({
url: '/pages/my/my',
success: () => {
this.updateRedirectInfo({
openType: 'switchTab',
from: '/pages/cart/cart'
})
}