账号登录保存密码

首页

<template>
	
	<view class="container">
		
		<image :src="userInfo.avatar" mode="widthFix" class="rounded-circle" style="width: 200rpx;"></image>
		<text v-if="loginStatus" class="font-md">{{userInfo.nickname}}</text>
		<navigator v-else url="/pages/my/my"><text class="font-md">登录/注册</text></navigator>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState({
				loginStatus: state => state.login.loginStaus,
				userInfo: state => state.login.userInfo
			})
		},
		methods: {
					gotomySetting(){
						uni.navigateTo({
							url:"/pages/setting/setting",
							success() {
								console.log("成功")
							},
							fail() {
								console.log("失败")
							}
						})
					},
					gotochild(_url){
						uni.navigateTo({
							url:_url
						})
					}
				}
	}
</script>

<style>
	/* .container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	} */
</style>

登录页面

<template>
	<view class="">
		<view class="">
			<text>用户名</text>
			<input type="text" value="" v-model="user.username" />
		</view>
		<view class="">
			<text>密码</text>
			<input type="text" value="" v-model="user.password" password />
		</view>
		<button type="default" @click="point">登录</button>
	</view>

</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				user: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			...mapMutations(['login']),
			point() {
				uni.showLoading({
					title: '登录中'
				});
				this.$H.post("/login", this.user).then(res => {
					console.log(JSON.stringify(res))
					if (res.msg == "ok") {
						uni.hideLoading()
						this.login(res.data);
						uni.showToast({
							title: '登录成功',
							duration: 2000,
							icon: "success",
							success: () => {
								uni.navigateBack({
									delta:1
								})
							}
						});
					} else if (res.errorCode === 404) {
						uni.hideLoading();
						uni.showToast({
							title: '请求错误',
							duration: 2000
						});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '服务器异常',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style>
</style>

全部配置common/lib/request.js

import $store  from  '../../store/index.js'
export default {
	// 全局配置
	common: {
		baseUrl: "http://ceshi3.dishait.cn/api",
		header: {
			'Content-Type': 'application/json;charset=UTF-8',
		},
		data: {},
		method: "GET",
		dataType: "json"
	},
	request(options = {}) {
		options.url = this.common.baseUrl + options.url;
		options.header = options.header || this.common.header;
		options.data = options.data || this.common.data;
		options.method = options.method || this.common.method;
		options.dataType = options.dataType || this.common.dataType;
		
		
		if(options.data.token){
			  var token =  $store.state.login.token;
			  console.log(token)
			  if(token===null || $store.state.login.loginStaus ===false ){
				 uni.showToast({
				 	title: '请先登录',
				 	icon: 'none'
				 });
				 return uni.navigateTo({
				 	url: '/pages/my/my.vue',
				 });
			  }else {
				  options.header.token = token;
			  }
		}
		// 请求
		return new Promise((resolve, reject) => {
			uni.request({
				...options,
				success: (res) => {
					resolve(res.data)
				},
				fail() {
					uni.showToast({
						title: '请求失败',
						duration: 2000
					});
					reject()
				}
			})
		})
	},
	get(url,data={},options={}){
		options.url = url;
		options.data = data;
		options.method = "GET";
		return  this.request(options)
	},
	post(url,data={},options={}){
		options.url = url;
		options.data = data;
		options.method = "POST";
		return  this.request(options)
	}
}

vuex中的管理者store/module/login

export  default{
	state:{
		// 用户保持状态
		loginStaus:false,
		token:null,
		userInfo:{}
	},
	mutations:{
		//登录初始化
		initUser(state){
			console.log(userInfo)
			var userinfo = uni.getStorageSync("userInfo");
			if(userinfo){
				userinfo = JSON.parse(userinfo);
				state.loginStaus =  true;
				state.userInfo =  userinfo;
				state.token = userinfo.token;
			}
		},
		// 登录
		login(state,userinfo){
			state.loginStaus =  true;
			state.userInfo =  userinfo;
			state.token = userinfo.token;
			uni.setStorageSync("userInfo",JSON.stringify(userinfo))
		},
		// 退出登录
		loginOut(state){
			state.loginStaus =  false;
			state.userInfo =  {};
			state.token = null;
			uni.removeStorageSync('userInfo');
		}
	}
}

index.js中

import  Vue  from  'vue';
import  Vuex from  'vuex';
import  login  from './module/lonig.js' 
 
Vue.use(Vuex);  
export default new Vuex.Store({
	modules:{
		login
	}
})

main.js

import Vue from 'vue'
import App from './App'
import $H  from './common/lib/request.js';
import store  from './store'
Vue.config.productionTip = false
Vue.prototype.$H = $H
App.mpType = 'app'

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