vue-cli+vuex实现token验证

一.应用需求

——都说在工作中才能学到更多，好像确实如此，前段时间中，在捣鼓微信公众号，即将一堆移动端管理页面放在微信公众号中。
——开始就涉及到了token，之前听说过token，却并不了解它是个啥，咋用，有什么用
token:Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示
——通俗讲，就是一个身份牌，服务器端生成的一串字符串，后台给前台一个token，前台通过token来进行判断是否是本人操作，后台同样验证token是否有效，是否是传给的那个token
——即所有的接口请求，请求后台数据都需要添加这个token，以此来证明你已经进来了，有能力进行相关的操作

二.实现步骤

1.获取token
——1.拿到那个后台给的登录接口，一般来讲，登录接口中会返回一堆数据，其中有用户名，密码，token，id等

this.axios.post(this.API.http+'/sys/mpTempLogin',{
          username:value
        }).then((res)=>{
        if(res.data.success){
        .......获取其中的token
        }
        }).then((err)=>{
        console.log(err)
	})

2.将token放在vuex中，方便调用
将token使用localStorage存储在本地
//登录页面

this.axios.post(this.API.http+'/sys/mpTempLogin',{
          username:value
        })
        .then((res)=>{
          if(res.data.success){
            console.log(res)
            this.token=res.data.result.token   //获取的toekn
            this.id=res.data.result.userInfo.id
            this.$store.commit('set_token',this.token)   //调用store中的获取token方法，并将token存在store中
            console.log(this.$store.state.token)
            }
            }）

3.创建vuex，设置store.js，存储token等需要全局使用的变量
创建vuex文件夹，创建store.js
将token使用localStorage存储在本地
vuex/store.js
——————使用store.js中的内容，必须在页面中引入此文件
eg::: import store from '../vuex/store.js'
//使用store.js中的变量：：this.$store.state.token(store.js中的变量)
//使用store.js中的方法：：this.$store.commit( 'set_token',this.token(需要的传值，没有就不传值) )
//store.js中的变量 只能通过store.js中的mutations中的方法才能进行修改和操作

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

var state={
    count:1,
    token:'',
    idCard:'',

}

var mutations={
    //localStorage存储token
    set_token(state, token) {
        state.token = token
        localStorage.token = token
    },
    //localStorage删除token
    del_token(state) {
        state.token = ''
        localStorage.removeItem('token')
    },

}

const store=new Vuex.Store({
    state,
    mutations:mutations
})
export default store

4.使用axios中的拦截器，在每次请求接口时，都将token添加到请求api的头部
//在main.js中进行全局配置
main.js

//设置axios的请求拦截器，在发出请求前进行操作
axios.interceptors.request.use(config=>{
  if(localStorage.getItem('token')){    //如果token已经存储在本地了，代表是已经进行了登录，且登录成功
    config.headers[ 'X-Access-Token' ] =localStorage.getItem('token')     //此时将token添加到url的头部header中
    console.log('成功')
  }
  //取消请求操作
  //config.cancelToken=new axios.CancelToken((cancel)=>{
    //window._axiosPromiseArr.push({cancel})
  })
  return config;
},err=>{
  return Promise.reject(error);
});

//设置axios的响应拦截器，在响应后的数据进行操作，即处理token失效等问题
请求成功，已经到达200，将执行response，请求不成功，在200之后将执行error
//至于token失效的场景，需要和后台进行商量，如果后台是请求成功，但状态码是401等(后台自己定义的状态码)返回token失效的message，只要请求成功，就执行response这一模块。
//如果后台返回500，请求失败，并返回一个message信息，告诉token失效，此时将在error中进行操作
axios.interceptors.response.use((response)=>{

  return response
},function(error){
  console.log(error.response.data)
  let data=error.response.data
  switch (error.response.status){
    case 403:
      Toast({
        message: '拒绝访问',
        position: 'top',
        duration: 2000
      });
      break
    case 500:  //可以使用其他的提示框架，根据环境使用，MessageBox弹窗可执行promise操作，使在点击确定后执行某些操作
      if(data.message=='Token失效，请重新登录'){
        Toast({    
          message: '登录已过期，请重新登录',
          position: 'top',
          duration: 2000
        });
      }
      break
    case 404:
      Toast({
        message: '很抱歉，资源未找到',
        position: 'top',
        duration: 2000
      });
      break
    case 504:
      Toast({
        message: '网络超时',
        position: 'top',
        duration: 2000
      });
      break
    case 401:
      Toast({
        message: '未授权，请重新登录',
        position: 'top',
        duration: 2000
      });
  }
  return Promise.reject(error)
})