Vue入门之Token使用简单实现

一：什么是token

1.token的优势 ：
​ 无状态、可扩展、安全(请求中发送token而不再是发送cookie能够防止CSRF(跨站请求伪造)。即使在客户端使用cookie存储token，cookie也仅仅是一个存储机制而不是用于认证。不将信息存储在Session中，让我们少了对session操作)

2.token的定义 :

​ Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。token其实说的更通俗点可以叫暗号，在一些数据传输之前，要先进行暗号的核对，不同的暗号被授权不同的数据操作

3.使用token的目的 ：

​ 是为了验证用户登录情况以及减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮

二：token的工作流程

三：Vue结合token的使用

• 第一步登录获取token,存储token,将token存储在localStorage

<!--需要的插件有 vuex  vue axios  vue-router  loacaStorage -->
登录页面  login.vue  
<script>
    // 用来存储token值
import {
     mapMutations } from "vuex";
    data(){
    
        return {
    
            username: "",
      	  password: "",
        }
    }
//点击登录时会触发表单的onSubmit事件，
    ...mapMutations(["changeLogin"]), //用来存储登录成功返回的token值，拿来当身份令牌
    onSubmit(values) {
    
        //备份this
      let _this = this;
      // 如果输入用户名与密码不为空
      if (values) {
    
        this.$http