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

服务器
本篇是关于Serverless 的最后一篇文章,主要介绍文件上传、用户管理、上线部署。

[[395683]]

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


文件上传 & 云对象存储

用户管理及登录授权服务

基础架构代码

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

  1. $ 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 记录执行服务器地址即可。

 

责任编辑:姜华 来源: 勾勾的前端世界
相关推荐

2021-04-27 19:20:54

微应用模块联邦

2018-03-27 13:26:51

教程

2022-01-24 13:46:24

框架

2010-06-11 09:01:02

.NET 4并行编程

2014-12-25 10:48:21

程序员代码

2012-02-06 13:15:37

IP-guard三重保信息防泄漏溢信科技

2013-01-21 13:52:47

2018-06-01 15:41:21

2020-12-20 18:56:21

腾讯云Serverless 运维

2011-03-04 09:59:41

Vsftpd匿名用户

2020-12-16 05:58:43

算法数据结构前端

2015-06-19 14:20:56

2022-01-07 07:53:14

部署用户管理

2023-10-18 17:07:21

AI 工具Claude 2

2021-04-08 21:32:38

华为快应用Serverless

2021-10-19 10:52:06

Serverless阿里云

2021-04-16 07:46:13

Serverless 云开发FaaS
点赞
收藏

51CTO技术栈公众号