Serverless 完结篇:文件上传、用户管理、上线部署。

共 1273字,需浏览 3分钟

 ·

2021-04-30 18:42

回忆一下之前发过的 serverless 内容:


后端架构的演进之路:Serverless 的诞生

愚人节笑话:Serverless 就是无服务

腾讯云 Serverless 实战演练

Serverless 开发实战之 Todo 案例

Serverless 云开发高阶应用

云函数 Todo 重构 + Vue 客户端调用


在 Vue 客户端调用中,需要继续完善获取数据的功能:



文件上传 & 云对象存储

 


用户管理及登录授权服务


基础架构代码

开始之前,先完成基础的代码和功能搭建,引入路由,完成注册登录的页面和对应的表单。

$ npm install vue-router


添加路由文件,\src\router\index.js



在入口文件 main.js 中引入并注册路由:



完成对应的单文件组件代码:


注册组件 src\components\Register.vue



登录组件:\src\components\Login.vue



注册逻辑


在控制台开启 “短信验证码登录” 的选项


 

短信验证使用的是 js-sdk,手册在这里登录认证 | 云开发 CloudBase - 一站式后端云服务,所以先安装:npm install@cloudbase/js-sdk


因为我们需要在多个地方使用,因此先进行封装,这里选在使用 Vue 插件的方式。


\src\assets\auth.js



不要忘记在入口文件中导入:\src\main.js



首先完成手机验证码的发送。



用户输入验证码及密码,进行验证码及手机号的验证。



验证注册成功后,跳转到登录界面。


登录逻辑


登录验证是非常简单的,那么,我们是如何保持登录状态的呢?



登录状态的保持有三种不同的方式,登录认证 | 云开发 CloudBase - 一站式后端云服务


local:在显式退出登录之前的 30 天内保留身份验证状态

session:在窗口关闭时清除身份验证状态

none:在页面重新加载时清除身份验证状态


在初始化调用auth方法时,传入:\src\assets\auth.js



不同的登录状态都可以在浏览器的控制台的 “Appliction” 中查看;那么在不同的组件中,如何获取登录状态和登录的数据呢?


auth 对象中,有 getLoginState 方法,看名字也知道,时获取登录状态的,我们在首页中使用挂载的生命周期函数进行验证,\src\components\Index.vue 



当然,你也可以使用 Vue-router 提供的导航守卫进行全局的登录状态验证。

 

上线部署

 


申请 SSL 证书,添加 CNAME 记录执行服务器地址即可。


这是我的第 122 篇文章。

恭喜你又在前端道路上进步了一点点。

点个“在看”和“”吧!

浏览 35
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报