小程序（五）移动端实现注册登录

---

一、封装全局路径

移动端发出请求，首先要填写好URL地址。为了在
移动端项目上集中管理URL路径，我们可以在 main.js 文件中用全局变量的语法，定义全局的
URL地址，这样更加便于维护。

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

Vue.config.productionTip = false

App.mpType = 'app'

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

let baseUrl = "http://127.0.0.1:8080"
Vue.prototype.url = {
	register: baseUrl+"/user/register",
	login: baseUrl+"/user/login"
}

二、封装Ajax

移动端通过Ajax向服务端提交请求，然后接收到的响应分若干种情况：

1. 如果用户没有登陆系统，就跳转到登陆页面。
2. 如果用户权限不够，就显示提示信息。
3. 如果后端出现异常，就提示异常信息。
4. 如果后端验证令牌不正确，就提示信息。
5. 如果后端正常处理请求，还要判断响应中是否有Token。如果令牌刷新了，还要在本地存储
   Token。
   如果移动端每次发出Ajax，都要做这么多的判断，我们的重复性劳动太多了。所以尽可能的把
   Ajax封装起来，减少重复性的劳动。我们可以在 main.js 文件中将Ajax封装好。

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

Vue.config.productionTip = false

App.mpType = 'app'

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

let baseUrl = "http://127.0.0.1:8080"
Vue.prototype.url = {
	register: baseUrl+"/user/register",
	login: baseUrl+"/user/login"
}



Vue.prototype.ajax = function(url, method, data, fun) {
	uni.request(
		{
		"url": url,
		"method": method,
		"header": {
			token: uni.getStorageSync('token')
		},
		"data": data,
		success: function(resp) {
			if (resp.statusCode == 401) {
				 uni.redirectTo({
					url: '../login/login'
				 });
			} else if (resp.statusCode == 200 && resp.data.code == 200) {
				 let data = resp.data
				 if (data.hasOwnProperty("token")) {
					 console.log(resp.data)
					 let token = data.token
					 uni.setStorageSync("token", token)
				}
				fun(resp)
			} else {
				 uni.showToast({
					 icon: 'none',
					 title: resp.data
				 });
			 }
		}	
	});
 }

三、注册事件

在pages/register/register.vue文件中完成如下：

<template>
	<view>
		<image src="../../static/ic_launcher.png" mode="widthFix" class="logo"></image>
 		<view class="register-container">
			
 			<input placeholder="输入你的邀请码" class="register-code" maxlength="6" v-model="registerCode" />
			
 			<view class="register-desc">管理员创建员工证账号之后，你可以从你的个人邮箱中获得注册邀请码</view>
			
			<button class="register-btn" open-type="getUserInfo" @tap="register()">执行注册</button>
			
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				registerCode: null
			}
		},
		methods: {
			register: function(){
				// 1、验证邀请码
				let that = this;
				if (that.registerCode == null || that.registerCode.length == 0){
					uni.showToast({
						 title: '邀请码不能为空',
						 icon: 'none'
					});
					return;
				} else if (/^[0-9]{6}$/.test(that.registerCode) == false){
					uni.showToast({
						 title: '邀请码必须是6为数字',
						 icon: 'none'
					 });
					 return;
				}
				
				
				// 2、获取微信授权码
				uni.login({
					provider: "weixin",
					success:function(resp){
						let code = resp.code;
						console.log('获取到的临时授权码:'+code);
						// 3、获取微信用户基本信息
						uni.getUserInfo({
							provider:'weixin',
							success:function(resp){
								let name = resp.userInfo.nickName;
								let url = resp.userInfo.avatarUrl;
								console.log('获取到的用户名:'+name);
								console.log('获取到的用户头像:'+url);
								// 4、定义注册小程序的请求参数对象
								 let data = {
								 	js_code: code,
								 	nickname: name,
								 	photo: url,
								 	inCode: that.registerCode
								 };
								// 5、发送注册请求
 								that.ajax(that.url.register,'POST',data,function(resp){
									let token = resp.data.token;
									uni.setStorageSync('token',token);
									console.log('token:'+token);
 								// 	let permission = resp.data.permission;
 								// 	uni.setStorageSync('permission',permission);
 									//6、跳转到首页
									 uni.switchTab({
									 	url: '../index/index'
									 });
 
 								})
							}
						})
					}
				})
			}
		}
	}
</script>
<style lang="less">
	@import url("register.less");
</style>

四、登录事件

1、封装登陆地址

在本篇文章二中已经将登陆注册的地址封装好了，这里省略

2、编写登陆方法

编辑pages/login/login.vue

<template>
	<view>
		<image src="../../static/ic_launcher.png" mode="widthFix"></image>
		<view class="logo-title">BUBA小程序</view>
		<view class="logo-version">2023.1</view>
		
		<button class="loginBtn" open-type="getUserInfo" @tap="login()">登录系统</button>
	
		<view class="register-container">没有账号？
			<text class="register" @tap="toRegister">立即注册</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toRegister: function(){
				uni.navigateTo({
					url: '../register/register'
				})

			},
			register: function(){
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(resp) {
						 let code = resp.code;
						 that.ajax(that.url.login,"POST",{"code":code},function(resp){
							 let permission = resp.data.permission;
							 uni.setStorageSync('permission', permission);
							//TODO 登录成功跳转到首页
							uni.switchTab({
								url: '../index/index'
							});
						 })
					},
					 fail:function(e){
						 console.log(e)
						 uni.showToast({
							 icon:"none",
							 title:"执行异常"
						 })
					 }
				});

			}
		}
	}
</script>

<style lang="less">
	@import url("login.less");
</style>