前言:uni-app 是使用vue的语法+小程序的标签和API的一套框架,是一套代码多端使用,目前是大前端的一种趋势;在开发过程中保持登录状态是很常见的需求,具体实现代码如下:
背景:初始打开页面—登录—关闭,再次打开(获取到已登录的信息)
具体过程:使用uni-app官方的数据缓存(api )和vuex来实现
在store/index.ts
import { GetterTree, MutationTree } from "vuex";
import {StateInfo} from './states'
const getters: GetterTree = {
isLogin(state:any):boolean {return Object.keys(state.member).length > 0},//是否登录,
};
再唤起登录页面
loginIn(): void {
if(!this.isLogin) {
uni.navigateTo({url: '/pages/login/login'})
return
}
uni.navigateTo({
url: "/pages/address/address?is_choose=true"
})
}
在登录页面根据不同端做一些处理(这里就h5和小程序,这里h5的具体业务代码就不说了)
<button type="primary" size="default" class="login-btn" @tap="login">
登录
</button>
<button type="primary" size="default" class="login-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">
微信一键登录
</button>
对于小程序
async getUserInfo(e) {
const {errMsg, userInfo} = e.detail
if(errMsg !== "getUserInfo:ok") {
uni.showModal({
title: '提示',
content: '您取消了授权登录,请重新授权',
showCancel: false
})
//没有授权登录就用默认的用户信息
store.SET_MEMBER(Member)
uni.navigateBack() return
}
else {
const { province} = userInfo
const member = Object.assign(Member, {province})
store.SET_MEMBER(member)
uni.navigateBack()
}
},
在store/index.ts
const Mutations: MutationTree = {
SET_MEMBER(state:StateInfo, member: typeof state.member): void {
state.member = member
uni.setStorage({
key: 'userInfo',
data: member
})
},
}
在App.vue文件中编写如下代码,从本地缓存中取出用户数据,然后调用SET_MEMBER方法,不需要发起网络登录请求。
onLaunch(): void {
let userInfo = uni.getStorageSync('userInfo') || '';
if (userInfo.id) {
uni.getStorage({
key: 'userInfo',
success: (res: DataInfo): void => { store.SET_MEMBER(res.data) }
})
}
},
.....
}