博客

因为这回的项目是app，所以不可避免的问题就是如何保持用户登录，第一次接触，在这个过程中踩了一些坑，其实只要熟悉了缓存原理就很好做，网上的解决方法也有很多，写一篇整理的帖子记录一下：

1.思路

这是当时不清楚整个流程的时候请教了一个朋友给的思路。

2.代码实现

login.vue


登录页的按钮及调用的方法：

<u-button type="primary" @click="submit" style="margin: 20rpx 0;">快速登录</u-button>

			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let params = {
							auth_type: 'sms',
							mobile: this.form.mobile,
							sms_token: this.codeToken,
							tenant_id: '000000',
							grant_type: 'password',
							password: this.form.verification,
							secret_code: ''
						}
						this.$http.post('/api',params).then(res=>{
							this.timer = null
							//这里用了uni-app自带的方法uni.setStorageSync设置缓存存储的数据
							uni.setStorageSync('access_token', res.access_token)
							uni.setStorageSync('refresh_token', res.refresh_token)
							uni.setStorageSync('expires_in', new Date().valueOf()/3600 + res.expires_in)
							this.$store.dispatch('quickLogin/setUserInfo',res)  //使用dispatch将获取的数据存入vuex中
							this.setPaientInfo(res.user_id)
							this.setCommonHospital(res.user_id)
							uni.showToast({
								title: '跳转中...请稍后',
								duration: 2000,
								icon: 'success'
							})
							this.timer2 = setInterval(()=>{
								clearInterval(this.timer2)
								this.timer2 = null
								uni.switchTab({
									url: '/pages/center/index'
								})
							},2000)
						})
					} else {
						uni.showToast({
							title: '请正确填写信息',  //对话框错误捕捉信息展示
							duration: 3000,
							icon: 'none'
						})
					}
				});
			},

quickLogin.js

文件

import http from "@/api/http.js"
const quickLogin = {
	namespaced: true,
	state: {
		userInfo: {},
	},
	mutations: {
		COMMIT_USERINFO(state,newInfo){
			state.userInfo = newInfo
		},
	},
	actions: {
		setUserInfo({commit},data){
			commit('COMMIT_USERINFO',data)
			commit('COMMIT_TOKEN',data.access_token)
		},
	}
}

export default quickLogin

检查一下session storage，保存成功。



退出登录使用uni.clearStorageSync()清空缓存，清空vuex里的数据就可以了。方法如下：

confirmLogout(){
				uni.clearStorageSync()
				this.$store.dispatch('quickLogin/setToken','')
				this.$store.dispatch('quickLogin/setUserInfo',{})
				uni.showToast({
					title: "已退出",
					icon: "none",
					duration: 3000
				})
				uni.navigateTo({
					url: '../../../pages/login/login'
				})
			}