前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uni-id入门(六)---基础操作(中)

uni-id入门(六)---基础操作(中)

作者头像
代码哈士奇
发布2021-10-25 11:44:36
7570
发布2021-10-25 11:44:36
举报
文章被收录于专栏:dmhsq_csdn_blog

这篇文章将会带大家使用客户端来请求云函数 我们的视频教程(免费)链接为https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/ 由于考研所以可能文章比较短也是为了拆分每一步操作 我们简单的来做个登录注册退出~ 为了方便演示,我们在一个(vue文件)页面文件里面来写

在这里插入图片描述
在这里插入图片描述

云函数代码

代码语言:javascript
复制
'use strict';
const uniIDs = require('uni-id')
exports.main = async (event, context) => {

	let res = {};
	let params = event.params ? event.params : {};

	const uniID = uniIDs.createInstance({
		context: context
	})

	const noNeedTokens = ['login', 'register', 'logout'];

	if (noNeedTokens.indexOf(event.action) == -1) {
		if (!event.uniIdToken) {
			res = {
				code: 403,
				message: "未携带token"
			}
			return res;
		} else {
			let check_user = await uniID.checkToken(event.uniIdToken, {});
			if (check_user.code === 0) {
				params.uid = check_user.uid;
			} else {
				res = check_user;
				return res;
			}
		}
	}

	switch (event.action) {
		case 'register': {
			const {
				username,
				password
			} = params;
			res = await uniID.register({
				username,
				password
			})
			break;
		}
		case 'login': {
			const {
				username,
				password
			} = params;
			res = await uniID.login({
				username,
				password,
				queryField: ['username', 'email', 'mobile']
			})
			break;
		}
		case 'logout': {
			res = await uniID.logout(event.uniIdToken);
			break;
		}
		default: {
			res = {
				code: 402,
				message: "请求非法"
			}
			break;
		}
	}

	//返回数据给客户端
	return res;
};

客户端调用

完整代码(下面分步讲解)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<template>
	<view class="content">
		<input v-model="username" placeholder="用户名" />
		<input v-model="password" placeholder="密码" />
		<button @click="register()">注册</button>
		<button @click="login()">登录</button>
		<button @click="logout()">退出</button>
		<text>{{token}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				username: "",
				password: "",
				token: ""
			}
		},
		onLoad() {

		},
		methods: {
			req(action,params){
				return new Promise((resolve,reject)=>{
					uniCloud.callFunction({
						name:'user-center',
						data:{
							action,
							params
						},
						success:res=>{
							resolve(res.result);
						},
						fail:res=>{
							reject(res.result);
						}
					})
				})
			},
			register(){
				this.req("register",{username:this.username,password:this.password}).then(res=>{
					console.log(res);
					uni.setStorageSync('uni_id_token',res.token);
					uni.setStorageSync('uni_id_token_expired',res.tokenExpired);
					this.token = res.token;
				})
			},
			login(){
				this.req("login",{username:this.username,password:this.password}).then(res=>{
					console.log(res);
					uni.setStorageSync('uni_id_token',res.token);
					uni.setStorageSync('uni_id_token_expired',res.tokenExpired);
					this.token = res.token;
				})
			},
			logout(){
				this.req("logout",{}).then(res=>{
					console.log(res);
					this.token = "";
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

封装请求

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
req(action, params) {
	return new Promise((resolve, reject) => {
		uniCloud.callFunction({
			name: 'user-center',
			data: {
				action,
				params
			},
			success: res => {
				resolve(res.result)
			},
			fail: res => {
				reject(res.result)
			}
		})
	})
}

由于本次只用了user-center云函数 所以name属性我固定了

登录

传参为用户名密码 登录成功将token保存为uni_id_token 则请求时会默认携带

代码语言:javascript
复制
login() {
	this.req("login", {
		username: this.username,
		password: this.password
	}).then(res => {
		console.log(res);
		uni.setStorageSync('uni_id_token', res.token);
		uni.setStorageSync('uni_id_token_expired', res.tokenExpired);
		this.token = res.token;
	})
}
在这里插入图片描述
在这里插入图片描述

注册

传参为用户名密码 注册成功会默认登录

代码语言:javascript
复制
register() {
	this.req("register", {
		username: this.username,
		password: this.password
	}).then(res => {
		console.log(res);
		uni.setStorageSync('uni_id_token', res.token);
		uni.setStorageSync('uni_id_token_expired', res.tokenExpired);
		this.token = res.token;
	})
}
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

退出

传参为uni_id_token

代码语言:javascript
复制
logout() {
	this.req("logout", {}).then(res => {
		console.log(res);
		this.token = "";
	})
}
在这里插入图片描述
在这里插入图片描述

结语

这里并没有处理错误情况 code为0为请求成功

在这里插入图片描述
在这里插入图片描述

你学会了吗~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/07/24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 云函数代码
  • 客户端调用
    • 完整代码(下面分步讲解)
      • 封装请求
        • 登录
          • 注册
            • 退出
            • 结语
            相关产品与服务
            云函数
            云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的无服务器执行环境,帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可在腾讯云基础设施上弹性、安全地运行代码。云函数是实时文件处理和数据处理等场景下理想的计算平台。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档