uni-app微信小程序保持登录状态(vuex和本地存储)
作者:互联网
我这个小白主要用的是vuex结合着uni-app自带的本地缓存调用
APIuni.setStorageSync('key', value)、uni.getStorageSync('key')
1、根目录新建store/index.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 是否登录标识
hasLogin: false,
// 账号数据
userInfo: {
id: "",
nikeName: '',
userName: '',
phone: '',
avatarUrl: '',
openId: '',
}
},
mutations: {
// login 登录
login(state, userInfo) {
// state.hasLogin = true;
state.userInfo = userInfo;
uni.setStorageSync('userInfo', userInfo)
},
// logout 注销
logout(state) {
state.userInfo = {};
state.hasLogin = false;
uni.clearStorageSync('userInfo');
}
}
})
export default store
2、main.js配置
3、在需要使用的页面引入
<template>
<view class="login">
<view @click="hidenLoginPopup" class="login-popup">
<view class="login-text">
<text style="font-size: 28rpx;letter-spacing: 4rpx;">您還未登錄</text>
<text style="font-size: 22rpx;color: #999;">相關操作涉及到用戶信息,請登錄后再試</text>
</view>
<view class="btn">
<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="left-btn" size="mini" type="default"></button> -->
<button @click.stop="goRegister" class="left-btn" type="default" size="mini">开户</button>
<button @click.stop="goLogin" class="right-btn" size="mini" type="default">登录</button>
</view>
</view>
</view>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
data() {
return {
code: '',
areaId: '1',
// 加密数据
encryptedData: '',
iv: '',
rawData: '',
signature: ''
};
},
methods: {
...mapMutations(['login']),
goRegister() {
console.log('getuserinfo', !uni.getStorageSync('userInfo'));
if (!uni.getStorageSync('userInfo')) {
uni.getUserProfile({
desc: '獲取您的昵稱、頭像、地區及性別',
success: infoRes => {
console.log('userInfo-res', infoRes);
if (infoRes.errMsg === 'getUserProfile:ok') {
uni.setStorageSync('encryptedData', infoRes.encryptedData);
uni.setStorageSync('iv', infoRes.iv);
uni.setStorageSync('signature', infoRes.signature);
this.login(infoRes.userInfo);
uni.navigateTo({
url: '/platforms/mp-weixin/register/registerVersion'
});
} else {
uni.showToast({
title: '授權失敗',
icon: 'error'
});
}
},
fail: err => {
console.log('userInfo-err', JSON.stringify(err));
}
});
} else {
console.log('uni.navigateTo');
uni.navigateTo({
url: '/platforms/mp-weixin/register/registerVersion'
});
}
},
goLogin() {
if (!uni.getStorageSync('userInfo')) {
uni.getUserProfile({
desc: '獲取您的昵稱、頭像、地區及性別',
success: infoRes => {
console.log('userInfo-res', infoRes);
if (infoRes.errMsg === 'getUserProfile:ok') {
uni.setStorageSync('encryptedData', infoRes.encryptedData);
uni.setStorageSync('iv', infoRes.iv);
uni.setStorageSync('rawData', infoRes.rawData);
uni.setStorageSync('signature', infoRes.signature);
this.login(infoRes.userInfo);
uni.navigateTo({
url: '/platforms/mp-weixin/register/registerVersion'
});
} else {
uni.showToast({
title: '授權失敗',
icon: 'error'
});
}
},
fail: err => {
console.log('userInfo-err', JSON.stringify(err));
}
});
} else {
uni.navigateTo({
url: '/platforms/mp-weixin/register/registerVersion'
});
}
},
hidenLoginPopup() {
this.$store.state.hasLogin = 1;
}
}
};
</script>
<style lang="scss">
</style>
这个不是很完善,只是基本用法,我这个菜鸡还在研究中。。。。完善了回头就来修改
标签:setStorageSync,微信,app,console,state,userInfo,infoRes,uni 来源: https://blog.csdn.net/weixin_56650035/article/details/119058328