【备战春招】第21天 登录状态的持久化实现

课程名称： CRMEB uniapp电商项目二次开发实战

课程章节： 7-4 登录状态的持久化实现
课程讲师： CRMEB

课程内容：
1、新建登录页面login.vue

<template>
	<view class="login">
		<view class="login-container">
			<image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/images/wechat_login.png"></image>
			<button class="wx-btn" type="primary" open-type="getUserInfo" @getuserinfo="onWchatAuthorizationLogin">微信授权登录</button>
		</view>
	</view>
</template>

<script>
	import authorizationMixin from '@/mixins/authorization'
	import { wechatAuthorizationLogin as wechatAuthorizationLoginApi } from '@/api/user'
	export default {
		mixins: [authorizationMixin],
		data() {
			return {
				
			}
		},
		methods: {
			onWchatAuthorizationLogin ({ detail: { encryptedData, iv, errMsg } }) {
				let params = {
					encryptedData,
					iv
				}
				if (errMsg === 'getUserInfo:ok') {
					uni.login({
						success: ({ code, errMsg }) => {
							if (errMsg === 'login:ok') {
								params['code'] = code
								this.wechatAuthorizationLogin(params)
							} else {
								uni.showToast({
									icon: 'none',
									title: '授权失败'
								})
							}
						},
						fail: () => {
							uni.showToast({
								icon: 'none',
								title: '授权失败'
							})
						}
						
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '授权失败'
					})
				}
			},
			async wechatAuthorizationLogin (params) {
				const { status, data, msg } = await wechatAuthorizationLoginApi(params)
				if (status === this.API_STATUS_CODE.SUCCESS) {
					this.SET_USER_INFO(data.userInfo)
					this.SET_TOKEN(data.token)
					
					this.runLoginedJobsQueue()
				} else {
					uni.showToast({
						icon: 'none',
						title: msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		&-container {
			padding: 72rpx 34rpx;
			image {
				width: 100%;
				height: 592rpx;
			}
		}
	}
</style>

2、修改mixins文件时间混入

import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
	computed: {
		...mapState({
			loginedJobsQueue: state => state.app.loginedJobsQueue
		})
	},
	methods: {
		...mapGetters({
			isLogined: 'isLogined'
		}),
		...mapMutations({
			SET_USER_INFO: 'SET_USER_INFO',
			SET_TOKEN: 'SET_TOKEN',
			SET_LOGINED_JOBS_QUEUE: 'SET_LOGINED_JOBS_QUEUE',
			SHIFT_LOGINED_JOBS: 'SHIFT_LOGINED_JOBS'
		}),
		
		
	}
}

3、修改入口文件调用main.js

import Vue from 'vue'
import store from './store'
import App from './App'

import '@/utils/facade'

Vue.config.productionTip = false

App.mpType = 'app'

store.commit('INIT_USER_INFO')
store.commit('INIT_TOKEN')

const app = new Vue({
  ...App,
  store
})
app.$mount()

课程收获：
这节课主要学习到了如何实现微信登录的过程与本地存储，首先利用uni.login实现登录获取code其中包括的参数有provider（登录服务提供商，通过 uni.getProvider 获取，如果不设置则弹出登录列表选择界面）success（ 接口调用成功的回调）code（用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息）再有就是利用uni.setStorageSync(KEY,DATA)，进行本地换成设置，其中的参数key（本地缓存中的指定的 key）data（需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象）利用uni.getStorageSync(KEY)获取本地换成其中key（本地缓存中的指定的 key）