Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)

Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)

前端工程师必须要也能够了解后端代码的运行逻辑,全栈工程师就必须能够更加清楚的明白每个流程是如何工作的,并且做到让代码更加的复用性和简洁明了
这个实战DEMO只有一个简单的登录验证功能,但是代码会比较整洁,代码会相对来说比较优雅一点
源码在:https://gitee.com/jimmyxuexue/vue_full_stack/tree/master/vue%E5%AE%9E%E6%88%981(%E5%89%8D%E5%90%8E%E7%AB%AFtoken%E9%AA%8C%E8%AF%81)/combat

前台的功能细节:

路由的细节:
  • 再进行路由操作的时候经常会出现url中含有#表示的是路由是按照哈希模式进行路由,如果想要去掉这个#,可以在初始化VueRouter的时候配置mode:'history'
    在这里插入图片描述
  • 当页面中的路由模块比较多的时候,有一些模块只是偶尔会被使用到,我们就可以在当这个路由被执行的时候再加载这个路由的组件,这样可以提升整体的运行性能
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第1张图片
  • 路由守卫:当有一些路由是需要验证的情况下才能够被访问,就比如用户信息等等的模块是需要提前登录的前提下才可以访问,我们可以给这些需要验证的模块在配置路由时配置meta对象属性,将auth定义成true,这样之后在路由守卫的时候同意来判断要to的模块的meta中是否含有auth属性为true,如果有就进行校验之后再允许访问,没有这个信息的话就直接放行。
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第2张图片
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第3张图片
  • 当用户没有token要访问一下需要token的路由时,直接通过守卫的next()转向登录页面,并设置一个query对象为to.path为的是记录一下要前往的路由,当登录成功的时候可以直接跳转到要去的路由,这个也是更加人性化的操作
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第4张图片
vuex的细节:
  • vuex是对状态统一管理,用户登录成功之后后端一般会传递一个token令牌到localstroage里面,单凭一这个来判断用户登录状态是不够的,最好是在vue的state中定义一个变量来作为用户是否登录进行判断
    在这里插入图片描述
  • 当用户在账号密码输入正确,后端也反馈了我们正确的消息之后,通过mutatimuons里面的方法来修改state中的isloging状态,使用mutatimuons里面的方法需要使用commit()来启动
    在这里插入图片描述
  • vuex中的actions对象中的方法都是异步处理异步函数的方法,为了让代码更加的整洁明了,也更加的优雅,我们可以将一些逻辑化的代码放在actions里面来处理,组件中就只要对返回的结果进行处理即可
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第5张图片
与后端处理的代码

可以在src下单独建立一个service文件夹,文件夹下放的就是所有模块化的与后端处理的代码,通过导入导出的方式,实现在组件中能够使用到这些与后端处理事务的代码
Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第6张图片
Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第7张图片
其他模块中要使用这个模块的代码就通过导入的方式使用,实例如下:
Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第8张图片

http拦截

在前后端交互中,比如与这个例子相似的项目中,只要我含有token这个令牌,我在访问后端的任意接口中都必须要在请求头上添加这个这个token,如果项目比较大,有100个1000个接口,需要在每个接口都添加一行设置请求头?这个显然是不明智的,程序员要学会偷懒,我们只需要在发起ajax请求之前,就添加上这个请求头,就会省事很多,这个就是http拦截

  • 请求拦截:发起请求时的拦截,使用的是类似中间键的形式拦截。axios有一个interceptors对象,这个对象包含request和response,得到这个就可以配置拦截
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第9张图片
响应拦截
  • 当我们账号或者密码输入错误、或者是令牌过期的时候,后端都会响应一个401的状态码,在拦截到这个401的响应码的时候就需要重新登录,删除前端过期的token
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第10张图片
触发拦截器
  • 这个拦截器我们只是定义好了,并没有触发,触发的最好地方是在main.js中触发,只需要在main.js中导入这个模块的函数,在执行一下这个函数即可
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第11张图片

后台的功能细节:

  • 后台正常的跨域处理中间键、路由中间键、获取post中间键已经写过很多遍了,也很简单,这里就不花时间写了
token

在设置token的时候后台需要设置一个保密的字符串,可以是用户的密码,总之是一种不能泄露的信息,只要其他用户得不到这个密码,就算他们有token令牌,也没有办法能够解密
在这里插入图片描述
前端在传递token请求头的时候也有同意的设置标准,我们可以理解成koa-jwt这个解密token模块就是按照这个标准来的,所以我们在设置请求头的时候也要按照这个标准,否则没办法解密成功
Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第12张图片
token是现在处理登陆状态使用的最多,也是最为成熟的一个方案,token令牌是一个长字符串,可以通过.点将token划分为三个部分,分别是:

  • 头部分:包含的是加密的算法,令牌类型等信息
  • 载荷部分:包含一些足以证明用户身份但是不怕泄露的信息、签发时间和过期日期等信息
  • 签名:根据头、载荷、和密钥得到的一串哈希字符串
jsonwebtoken模块和koa-jwt模块
  • jsonwebtoken是用于生成token令牌的模块、koa-jwt是用于解密token令牌的模块
  • token的处理机制就是在用户登录成功的情况下传递一个token令牌给前端,前端在访问需要验证的接口时会携带token,因为token可能会被恶意的修改,所以在后端得到这个token的时候需要对这个token进行一次解密,解密用到的就是koa-jwt模块,会自动解密。只有解密成功才可以继续访问,否则直接返回401状态码
    设置token
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第13张图片
    解密token,这个是koa-jwt模块已经封装好,只需要写在async操作后面的地方即可,只要没有验证成功,就不会执行后面的代码
    Vue实战1-登录状态的处理(token、前后端请求拦截、项目结构的处理)_第14张图片

总结

  • 在写完并且理解完了这个demo之后,终于是理解了token令牌在前后端之间的工作流程。
  • 更加明白怎样能够更模块化的写代码,让代码更加的优雅。

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