uni.app小程序登录页持久化存储和退出后清除本地缓存-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni.app小程序登录页持久化存储和退出后清除本地缓存。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

持久化存储

在store里面的user.js(自己创建的）中

export default {
	state: {
		status: false,   //登录的状态，获取数据中status是1，登录成功时状态为1
		token: false,   //一个令牌，看你是不是进入的一个令牌
		userInfo: {}
	},
	mutations: {
          getUserInfo(state,preload){
			  state.status=preload.status
			  state.token = preload.token
			  state.userInfo = preload
			  uni.setStorageSync('userInfo', state.userInfo);  //把state.userInfo存储起来
			  uni.setStorageSync('token', state.token); //把state.token存储起来
		  }，
              //储存之后调用
          initUser(state) {   //initUser自己随便起的名字
			let user = uni.getStorageSync('userInfo');
            //获取下面存储中setStorageSync里面的userInfo数据
			state.userInfo = user
			state.token = user.token
			state.status = user.status
		}
	},
	getters: {

	},
	actions: {

	}

}

获取数据后在App.vue中触发他

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			this.$store.commit('initUser')
		},
		onShow: function() {
			console.log('App Show')
			this.$store.commit('initUser')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

退出后清除本地缓存

uniapp清除本地存储,小程序,vue.js,前端

在api中login.js创建一个请求

import request from '../utils/request.js'
import store from '../store' 
export function logout(){
	console.log(store);
	return request({
		url:`/logout`,
		method:'POST',
		header:{
			token:store.state.user.token //在打印的store中找到token的位置
		}
	})
}

因为接口数据有header头,所有看看request.js请求中是否加入了header

var request = function(options){
	return new Promise((resolve,reject)=>{
		uni.request({
			url:baseURL+options.url,
			method:options.method||'GET',
			data:options.data||{},
			header: options.header || {},
			dataType:options.dataType||'json',
			success: (res) => {
				resolve(res.data)
			},
			fail: (err) => {
				reject(err)
			}
		})
	})
}

在user.js中加入清除缓存后的数据

mutations:{
	  layout(state) {
		  	 state.userInfo = ''
		  	 state.token = ''
		  	 state.status = ''
		       uni.removeStorageSync('userInfo');
		       uni.removeStorageSync('token');
		  }
        }

在登录后我的那个页面中

			<view  @click="layOut"> 退出登录 </view>

引入文件地址文章来源地址https://www.toymoban.com/news/detail-534133.html

import {logout} from '../../api/login.js'  //填写接口的地址
	methods: {
			...mapMutations(['layout'])，
			layOut(){
				logout().then(res=>{
					console.log(res);
					this.layout()
					uni.navigateTo({
						url:'../login/login'
					})
				})
			}
        }

到了这里，关于uni.app小程序登录页持久化存储和退出后清除本地缓存的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！