评论

uni-app(TS版本) 开发微信小程序之保存登录状态

uni-app开发小程序之实现登录状态缓存

前言: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) }
 		})
 	}
 }, 
 .....
 }
最后一次编辑于  2020-08-18  
点赞 5
收藏
评论

1 个评论

  • 木易宇飞
    木易宇飞
    发表于移动端
    2020-08-19
    666呢
    2020-08-19
    赞同
    回复
登录 后发表内容