Vue elementUI实现免密登陆与号码绑定功能

目录
  • 前言
  • 登录功能
  • 绑定/解绑功能
  • 获取用户信息功能
  • 获取用户信息功能
  • 最终效果
  • 项目地址

前言

前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读。

首先来编写发送验证码函数, 登录,绑定,解绑的业务都需要发送验证码功能,通过currentVerifyingType 来区别当前验证码种类。也就是在服务端的Purpose目的。

VerifyingType 可以为LOGINUNBIND_PHONENUMBERBIND_PHONENUMBER

async sendVerificationCode(phoneNumber, type) {
    this.currentVerifyingType = type;
    this.smsSendCd = 60;
    this.timer = setInterval(() => {
    this.smsSendCd--;
    if (this.smsSendCd <= 0) {
        clearInterval(this.timer);
    }
    }, 1000);
    await request(`${this.host}${this.prefix}/Captcha/Send`, "post", {
    userId: this.userInfo == null ? null : this.userInfo.id,
    phoneNumber: phoneNumber,
    type: type,
    })
    .catch((re) => {
        var res = re.response.data;
        this.errorMessage(res.error.message);
    })
    .then((re) => {
        var res = re.data.result;
        this.successMessage("发送验证码成功");
    });
}

注意几个关键的全局变量

userInfo: null,                   //用户对象
currentVerifyingType: null,       //当前发送验证码的用途
smsSendCd: 0,                     //发送验证码的冷却时间,默认60s
loginForm: {                      //登录对象
username: "",
password: "",
},
token: null,                      //登录凭证Token
verifyNumber: null,               //填写的验证码

登录功能

创建手机号输入控件

<el-input
    ref="username"
    v-model="loginForm.username"
    :placeholder="'请输入手机号'"
    type="text"
    tabindex="1"
    autocomplete="on">
    <template slot="prepend">+86</template>
</el-input>

创建验证码控件,并添加一个按钮用于发送验证码,点击后触发sendVerificationCode

<el-input
    ref="password"
    v-model="loginForm.password"
    :type="passwordType"
    :placeholder="'发送验证码后键入验证码'"
    tabindex="2"
    autocomplete="on"
    @blur="capsTooltip = false"
    @keyup.enter.native="handleLogin"
    >
    <el-button
        slot="append"
        :disabled="smsSendCd > 0"
        @click="sendVerificationCode(loginForm.username, 'LOGIN')"
        >{{
        smsSendCd == 0 ? "发送验证码" : smsSendCd + "后重试"
        }}
    </el-button>
</el-input>

登录函数,将验证电话号码(即用户名)和验证码

async handleLogin() {
    this.loading = true;
    let phoneNumber = this.loginForm.username;
    let password = this.loginForm.password;
    phoneNumber = phoneNumber.trim();
    await request(`${this.host}api/TokenAuth/Authenticate`, "post", {
    phoneNumber,
    password,
    });
}

登录完成后,将Token存入Cookie

.then(async (res) => {
    var data = res.data.result;
    setToken(data.accessToken);

绑定/解绑功能

创建新手机号输入框,若没有绑定手机,附带绑定按钮,按下后将发送验证码;若已绑定手机,需要先解绑,才能绑定新号码,附带解绑按钮,按下后将发送验证码

<el-input v-model="userInfo.phoneNumber"> </el-input>
<el-button
    v-if="!userInfo.isPhoneNumberConfirmed"
    size="mini"
    type="primary"
    :disabled="smsSendCd > 0"
    @click="
    sendVerificationCode(userInfo.phoneNumber, 'BIND_PHONENUMBER')
    "
    >{{ smsSendCd == 0 ? "验证手机号" : smsSendCd + "后重试" }}
</el-button>
<el-button
    v-else
    size="mini"
    type="danger"
    :disabled="smsSendCd > 0"
    @click="
    sendVerificationCode(userInfo.phoneNumber, 'UNBIND_PHONENUMBER')
    "
    >{{ smsSendCd == 0 ? "解绑手机号" : smsSendCd + "后重试" }}
</el-button>

创建校验短信验证码控件

<el-input v-model="verifyNumber">
    <el-button
        slot="append"
        type="primary"
        size="mini"
        @click="verify">
        完成验证
    </el-button>
</el-input>

创建校验短信验证码函数,

async verify() {
    var action = null;
    if (this.currentVerifyingType == "BIND_PHONENUMBER") {
    action = "Bind";
    } else if (this.currentVerifyingType == "UNBIND_PHONENUMBER") {
    action = "Unbind";
    } else {
    action = "Verify";
    }
    await request(`${this.host}${this.prefix}/Captcha/${action}`, "post", {
    token: this.verifyNumber,
    })
    .catch((re) => {
        var res = re.response.data;
        this.errorMessage(res.error.message);
    })
    .then((re) => {
        var res = re.data;
        if (res.success) {
        this.successMessage("绑定成功");
        window.location.reload()
        }
    });
}

获取用户信息功能

登录成功后我们要拿到当前用户的信息,存入userInfo对象,并在页面上简单展示

<span>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{ userInfo }}</span>

创建一个获取当前用户的函数

async getCurrentUser() {
    await request(
    `${this.host}${this.prefix}/User/GetCurrentUser`,
    "get",
    null
    )
    .catch((re) => {
        var res = re.response.data;
        this.errorMessage(res.error.message);
    })
    .then(async (re) => {
        var result = re.data.result as any;
        this.userInfo = result;
        this.token = getToken();
        clearInterval(this.timer);
        this.smsSendCd = 0;
        this.currentVerifyingType = null;
        this.successMessage("登录成功");
    });
}

此函数将在成功登录之后调用,也用于已登录状态的情况下,打开网页时调用,在handleLogin函数中,在请求登录api后编写续操作

.then(async (res) => {
    var data = res.data.result;
    setToken(data.accessToken);
    await this.getCurrentUser();
})

获取用户信息功能

登出, 将Token以及用户信息置空

<el-button
    :loading="loading"
    type="danger"
    style="width: 100%"
    @click.native.prevent="logout">
    退出登录
</el-button>
logout() {
    setToken(null);
    this.token = null;
    this.userInfo = null;
},

至此,已完成了所有的工作

最终效果

项目地址

Github:matoapp-samples

到此这篇关于Vue elementUI实现免密登陆与号码绑定功能的文章就介绍到这了,更多相关Vue免密登陆与号码绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-05

vue2+elementUI的el-tree的懒加载功能

lazy 属性为true 时生效lazy ----> 是否懒加载子节点,需与 load 方法结合使用 isLeaf可以提前告知 Tree 某个节点是否为叶子节点,从而避免在叶子节点前渲染下拉按钮. HTML部分 <el-tree class="filter-tree" ref="tree" accordion :data="leftData" @node-click="handleNodeClick" node-k

vue3与elementui封装一个便捷Loading

目录 前言 实际使用 代码实现 前言 因为后台管理,总要写很多loading状态的变量,然后控制开启和关闭..我个人很讨厌写这种重复的代码..所以为了少写点这种变量,所以突发奇想封装一个,目前感觉还是挺好用的,没出啥bug...在表格中也能运用自如..喜欢的话,可以复制到你自己的项目拿去用,记得点个赞噢 实际使用 代码实现 import { reactive } from 'vue' import { ElMessageBox, ElMessage } from 'element-plus' i

vue2+elementUI的el-tree的选中、高亮、定位功能的实现

在使用无选择框的el-tree时遇到的坑以及如何使用el-tree 最后附全部代码 ref="tree" ----> 必须写 accordion ----> 是否每次只打开一个同级树节点展开 看个人选择 default-expand-all ----> 默认打开全部节点 :data="leftData" ----> 必写 展示数据 @node-click="handleNodeClick" ----> 节点被点击时的

vue下的elementui轮播图自适应高度问题

目录 elementui轮播图自适应高度 elementui轮播图自适应的最简单实现 效果如下 拉伸一下 elementui轮播图自适应高度 翻了下api 没有找到对应的属性,所以这里用自定义方法来实现 <el-carousel :interval="5000" arrow="never" :height="autoHeight">      <el-carousel-item v-for="(banner, inde

vue+elementUI组件tree如何实现单选加条件禁用

目录 vue+elementUI组件tree单选加条件禁用 使用如上方法就可以完成实现单选 完结!付上一个完成的代码- vue+elementUI组件tree单选加条件禁用 elementUI tree:http://element.eleme.io/#/zh-CN/component/tree 官方给出的API还是挺全的,但是示例木有给全,有几个API的说明也不是很能理解- tree实现带选择框的要加上node-key="id" show-checkbox两个属性, <el-t

VUE+elementui组件在table-cell单元格中绘制微型echarts图

需求效果图示例 实际完成效果图 ** 代码实现 注:table表格为二次封装的子组件 -在table表格中 根据 scope.$index动态设置元素的id ,便于指定单元格的echarts初始化: -在单元格中触发一个方法,传入当前的scope.row数据或者指定其他数据,并且传入 scope.$index 以及一个字符串便于识别当前是哪条数据的charts -在方法中绘制echarts** <el-table-column align="center"> <tem

浅谈vue中组件绑定事件时是否加.native

组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)

Vue.js组件tree实现无限级树形菜单

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

vue elementUI table表格数据 滚动懒加载的实现方法

在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

Vue.js组件tree实现省市多级联动

小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo

vue+elementUI组件table实现前端分页功能

前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据 :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"   //不多解释 再就是设置分页器total等于table数据的长度 :total="tableData.length" 点击分页器的操作 methods: { handleSizeChange(val) { con

基于element-ui封装可搜索的懒加载tree组件的实现

引言 最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用"懒加载"的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的:因为采用"懒加载"数据,搜索当然也是远程搜索了:确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造):[这只是自己实现的一种思路,希望大家多多指正] 1.懒加载树

基于element-ui组件手动实现单选和上传功能

前言 在用户使用过程中提出一键导入的功能,需求如下:点击导入按钮显示提示框,然后是单选框以及上传按钮.pc端常使用element-ui组件,但是这个项目是vue1的老项目,并且没有element-ui组件.所以需要自己动手实现单选功能和上传功能. radio 属性及方法 name: 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现) id: 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radio value:单选按钮的值,选

vue中Element-ui 输入银行账号每四位加一个空格的实现代码

一.问题描述: 我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格.那么,在vue,element-ui 组件中,如何实现呢? 二.效果图: 三.实现代码: <el-table-column prop="account" label="银行账号"> <template slot-scope="scope"> <el-input type="text" maxlength=&q

vue中使用elementUI组件手动上传图片功能

Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法 代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim