token实现思路

token
如何实现token的登录
1.第一次登录通过登录接口获取一个 token值
2.接下来所有的接口其他操作都带上 一个token值。

token验证
1.解析token的加密信息
里面有一个时间戳，拿token加密的时间戳和系统时间戳（一般系统时间会是和现实时间有几个小时的时间差）比较 判断这个时间戳是否过期
1).如果是已经过期了的，返回报错信息。
2).如果未过期，对时间戳的有效期加长30分钟。

漏洞
1.很多人对token加密比较简单，一旦被解析对方可以明文看到时间戳，从而推断出系统时间差值，做很多奇怪的操作。

前端使用token
1.登录成功后将token保存在全局变量中。

2.建议二次封装ajax 请求将 token写入header 中，这样就有两个ajax请求方法
1）ajax普通请求方法
2）tokenAjax 二次封装的ajax请求方法
在项目中如果 是不需要token验证的请求统一使用 ajax普通方法，如果是需要token就使用二次封装的方法。

import axios from 'axios'
import { Promise } from 'promise'
import { Notification } from 'element-ui'
import qs from 'qs'

const baseURL = window.SYSTEM_CONFIG.webServer //丙方1
const webServerPer = window.SYSTEM_CONFIG.webServerPer //丙方2
export default class Ajax {
  constructor(SessionKey = '', TIMEOUT = 60000) {
    this._axios = axios.create({
      baseURL,
      TIMEOUT,
      params: {},
      //SessionKey指的就是token
      headers: {
        SessionKey: SessionKey
      }
    })
    this._axios.interceptors.request.use(
      config => {
        return config
      },
      error => {
        Notification({
          title: '网络请求超时',
          message: '请检查网络请求是否配置正确',
          type: 'error',
          showClose: false
        })
        return Promise.reject(error)
      }
    )
    this._axios.interceptors.response.use(response => {
    //这是ajax 返回的拦截器 在使用ajax中做一步特定错误的拦截  和后端商议好  如果接口中code返回 特定的值 比如-6 直接判断为未登录
      if (response.data) {
        if (response.data.Code == -6) {
          window.localStorage.clear()
          window.location.href = '/error'
        }
        return response.data
      }
    })


    //再次封装一个ajax 请求
    this._axios2 = axios.create({
      baseURL:webServerPer,
      TIMEOUT,
      params: {},
      headers: {
        SessionKey: SessionKey
      }
    })
    this._axios2.interceptors.request.use(
      config => {
        return config
      },
      error => {
        Notification({
          title: '网络请求超时',
          message: '请检查网络请求是否配置正确',
          type: 'error',
          showClose: false
        })
        return Promise.reject(error)
      }
    )
    this._axios2.interceptors.response.use(response => {
      if (response.data) {
       //此次是第二个封装ajax的拦截，不做任何处理
        return response.data
      }
    })

  }
  // 请求方式
  //_axios  封装的get请求
  get(url, params = {}) {
    return this._axios({ method: 'get', url, params })
  }
    //_axios  封装的post请求
  post(url, data = {}, params = {}) {
    return this._axios({
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      url,
      data,
      params
    })
  }
    //_axios  封装的post2请求   headers请求格式不一样了，专门给上传功能配置一个post方法
  post2(url, data = {}, params = {}) {
    return this._axios({
      method: 'post',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      url,
      data,
      params
    })
  }
  //_axios2  这个是第二个封装的ajax的post方法 
  post3(url, data = {}, params = {}) {
    return this._axios2({
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      url,
      data,
      params
    })
  }
}

像代码中 我封装了两个ajax 两个ajax使用的都是同一个token 只是一个拦截请求后的特定的返回参数，另一个没有做处理。
日常开发中可能会和多个丙方对接多套token，全都可以在这里面配置出来方便开发。