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'
  
• 当页面中的路由模块比较多的时候，有一些模块只是偶尔会被使用到，我们就可以在当这个路由被执行的时候再加载这个路由的组件，这样可以提升整体的运行性能
  
• 路由守卫：当有一些路由是需要验证的情况下才能够被访问，就比如用户信息等等的模块是需要提前登录的前提下才可以访问，我们可以给这些需要验证的模块在配置路由时配置meta对象属性，将auth定义成true，这样之后在路由守卫的时候同意来判断要to的模块的meta中是否含有auth属性为true，如果有就进行校验之后再允许访问，没有这个信息的话就直接放行。
  
  
• 当用户没有token要访问一下需要token的路由时，直接通过守卫的next()转向登录页面，并设置一个query对象为to.path为的是记录一下要前往的路由，当登录成功的时候可以直接跳转到要去的路由，这个也是更加人性化的操作
  

vuex的细节：

• vuex是对状态统一管理，用户登录成功之后后端一般会传递一个token令牌到localstroage里面，单凭一这个来判断用户登录状态是不够的，最好是在vue的state中定义一个变量来作为用户是否登录进行判断
  
• 当用户在账号密码输入正确，后端也反馈了我们正确的消息之后，通过mutatimuons里面的方法来修改state中的isloging状态，使用mutatimuons里面的方法需要使用commit()来启动
  
• vuex中的actions对象中的方法都是异步处理异步函数的方法，为了让代码更加的整洁明了，也更加的优雅，我们可以将一些逻辑化的代码放在actions里面来处理，组件中就只要对返回的结果进行处理即可
  

与后端处理的代码

可以在src下单独建立一个service文件夹，文件夹下放的就是所有模块化的与后端处理的代码，通过导入导出的方式，实现在组件中能够使用到这些与后端处理事务的代码


其他模块中要使用这个模块的代码就通过导入的方式使用，实例如下：

http拦截

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

• 请求拦截：发起请求时的拦截，使用的是类似中间键的形式拦截。axios有一个interceptors对象，这个对象包含request和response，得到这个就可以配置拦截
  

响应拦截

• 当我们账号或者密码输入错误、或者是令牌过期的时候，后端都会响应一个401的状态码，在拦截到这个401的响应码的时候就需要重新登录，删除前端过期的token
  

触发拦截器

• 这个拦截器我们只是定义好了，并没有触发，触发的最好地方是在main.js中触发，只需要在main.js中导入这个模块的函数，在执行一下这个函数即可
  

后台的功能细节：

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

token

在设置token的时候后台需要设置一个保密的字符串，可以是用户的密码，总之是一种不能泄露的信息，只要其他用户得不到这个密码，就算他们有token令牌，也没有办法能够解密

前端在传递token请求头的时候也有同意的设置标准，我们可以理解成koa-jwt这个解密token模块就是按照这个标准来的，所以我们在设置请求头的时候也要按照这个标准，否则没办法解密成功

token是现在处理登陆状态使用的最多，也是最为成熟的一个方案，token令牌是一个长字符串，可以通过.点将token划分为三个部分，分别是：

• 头部分：包含的是加密的算法，令牌类型等信息
• 载荷部分：包含一些足以证明用户身份但是不怕泄露的信息、签发时间和过期日期等信息
• 签名：根据头、载荷、和密钥得到的一串哈希字符串

jsonwebtoken模块和koa-jwt模块

• jsonwebtoken是用于生成token令牌的模块、koa-jwt是用于解密token令牌的模块
• token的处理机制就是在用户登录成功的情况下传递一个token令牌给前端，前端在访问需要验证的接口时会携带token，因为token可能会被恶意的修改，所以在后端得到这个token的时候需要对这个token进行一次解密，解密用到的就是koa-jwt模块，会自动解密。只有解密成功才可以继续访问，否则直接返回401状态码
  设置token
  
  解密token，这个是koa-jwt模块已经封装好，只需要写在async操作后面的地方即可，只要没有验证成功，就不会执行后面的代码
  

总结

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