element input 只能输入数字_Vue实战项目：电商管理系统（Element-UI）-（2）登录退出

1.登录概述和Token原理分析

token原理：在客户端登录页面输入用户名和密码进行登录 ，服务器验证通过之后生成该用户的 token 并返回 ，然后客户端存储该 token。后续所有的请求都携带该 token 发送请求，由服务器端验证 token 是否通过。

2.登录功能实现

(1)打开项目前现在项目终端输入：git status 检查工作区是否干净；在开发中若要开发一个新功能就要把它放到一个新分支上，在该新分支上进行开发完毕后再合并到master上

git创建新分支 - 明明一颗大白菜 - 博客园​www.cnblogs.com

（2）设置背景色并在屏幕中央绘制登录盒子：需要安装开发依赖less-loader和less写CSS

（3）绘制带icon的input输入框：可以通过prefix-icon和suffix-icon属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。导入第三方图标库使用。

https://element.eleme.cn/#/zh-CN/component/form​element.eleme.cn

（4）实现表单的重置功能：先为表单绑定ref属性就可以获取该表单的实例对象，然后可以通过this.$refs.ref属性名，获取到该表单，对其调用重置表单：resetFields（包括重置表单内容和表单规则）方法

（5）登录之后的完善操作：验证成功后，使用this.$router.push跳转到home页面

编程式的导航 | Vue Router​router.vuejs.org

（6）路由守卫导航控制页面访问权限：利用sessionStorage保存的token来判断用户有没有访问权限，若token为空则强制跳转到login页面编程式的导航 | Vue Router（6）路由守卫导航控制页面访问权限：利用sessionStorage保存的token来判断用户有没有访问权限，若token为空则强制跳转到login页面

（7）实现退出功能：点击退出按钮，清空token并跳转到login页面

（8）将本地代码提交代码到码云中：先终端中先运行‘git status’查看是否有未被添加的文件（红名），若有运行‘git add .’添加后再次检查，使用‘git checkout master’切换到master分支，运行‘git push’提交到仓库master分支中。创建login分支并提交到仓库命令：‘git push -u origin login’