今天与大家分享以下前端登录页面（带有验证消息）的写法 上卷

今天本女子整理了一下前端以及后端登录页面的写法 算是比较全面的 希望能帮助大家

首先先定义一个前端页面 大概效果是这样子的，就简单实现了功能

话不多说，上前端代码

在路由中定义

开发Vue全局前置路由守卫（路由守卫：所有的路由切换都会执行，一般写在路由配置文件中）

    路由守卫是路由在跳转前、后过程中的一些钩子函数，这些函数可以让你操作一些其他的事，在后台管理中设置权限时经常看到，在实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被执行其他操作，如返回首页。

路由守卫分为：全局守卫，组件守卫，路由独享

 

 

 

 

 在这里说一下这个 @keyup.enter.native按回车触发事件 就是按下回车键就登录

 

 

 

 在login.js中定义以下两个方法

 在utils中的request.js中定义请求拦截器 和响应拦截器 这里的请求拦截器（在请求发出之前）是在除了获取验证码和登录的这两个请求，其他所有的请求都加上认证Authorization 里面存的是token信息，用来判断登录的是不是同一个用户

这里的响应拦截器作用是接收到响应进行的一些操作。例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。就是在请求结果返回后，先不直接导出，而是对响应码等等进行处理，这里是对401进行处理，处理好之后在导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器

 

 Promise.reject(data.msg):不管传递的是什么值，只要决议为失败，后面就不会进行任何处理，而是执行then里的reject方法，使用前面的data值进行处理；   注意这里没有写

获得验证码的请求没有Authorization 

 登录的请求的请求头中没有Authorization

 除了刚刚那两个 其他任何一个请求都有Authorization

Authorization里面放的就是token，就相当于每次发送请求的时候，拦截器都会拦截一次你的请求，
把你请求头部的Authorization拿出来，与当前存在服务器上的token做对比
如果是同一个，则证明是同一用户，然后拦截器就为你当前的请求放行，继续执行你的请求
如果不是同一个，那么服务器会截断你的请求并发送错误码给前端，让前端验证身份重新登陆

 前端就这么多了，后端紧跟上

有用上的家人们，请帮忙点一下小赞赞 比心~~~~