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

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

首先先定义一个前端今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第1张图片页面 大概效果是这样子的,就简单实现了功能

话不多说,上前端代码

在路由中定义

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

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

路由守卫分为:全局守卫,组件守卫,路由独享

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第2张图片

 

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第3张图片

 今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第4张图片

 

 

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第5张图片

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第6张图片

 在这里说一下这个 @keyup.enter.native按回车触发事件 就是按下回车键就登录今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第7张图片

 今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第8张图片

 今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第9张图片

 

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第10张图片

 在login.js中定义以下两个方法今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第11张图片

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

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

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第12张图片

 今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第13张图片

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

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第14张图片

获得验证码的请求没有Authorization 

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第15张图片

 登录的请求的请求头中没有Authorization今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第16张图片

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

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

今天与大家分享以下前端登录页面(带有验证消息)的写法 上卷_第17张图片

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

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

你可能感兴趣的:(前端,vue.js)