拦截token验证与ref Token (Vue, Axios)

2019-05-30

vue + axios实现集中式管理
token验证是我们开发中最常用到登陆会话机制, 他的诸多优缺点我这里九不做过多的叙述了,我主要说的就是他的实现方式了.由于项目是基于vuex开发的, 所以用备受好评的vuex作为我们的状态管理那是毫无悬念.

开使准备

我们知道token一般都是由我们在用户登陆之后后端返回的, 我目前手上这个项目是登陆后会放回token与 user_key, 一般token只有几小时到几天的有效期,有效期过去我们可以凭借 user_key到指定的接口刷新获取到新的token, 而user_key过期之后也就意味着本次登陆已经完全过期了, 必须让用户重新登陆.

大致思路

理清楚了思路, 代码实现起来九简单了不少:
流程图
大致的处理应该也就这样了, 本人比较懒, 本地懒得做啥export_time判断了,全交给server做这种判断的活.自我觉得这样会比较安全点.

代码实现

/store.js vue的状态管理文件, 主要集中管理token等用户信息

import Vue from 'vue'
import Vuex from 'vuex'
// cookie 操作, 默认刷新页面需要从cookie里读取一些信息
import { getToken, getKey, setToken, setKey } from '@/libs/util'
// 导入request
import { get, post } from '@/libs/request'
// 需要在这里储存token等状态信息

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        token: getToken(),
        key: getKey(),
        user: {}
    },
    mutations: {
        setToken(state, val){
            state.token = val
            setToken(token)
        },
        setKey(state, val){
            state.key = key
            setKey(val)
        },
        setUser(state, val){
            state.user = val
        }
    },
    actions: {
        // 登陆
        handleLogin ({ commit }, {username,password}) {
          return new Promise((resolve, reject) => {
            post('/login',{username, password}).then(({data}) => {
                commit('setKey', data.key)
                commit('setToken', data.token)
                resolve()
            }).catch(err => {
              console.log(err)
              reject(err)
            })
          })
        }
        // 退出登录
        handleLogOut ({ commit }) {
          return new Promise((resolve, reject) => {
            try{
              commit('setKey', '')
              commit('setToken', '')
              commit('setUser',{})
              resolve()
            }catch(e){
              reject(e)
            }
          })
        },
        // 获取用户相关信息
        getUserInfo ({ commit }) {
          return new Promise((resolve, reject) => {
            try {
              get('/user/info').then(({data}) => {
                commit('setUser', data)
                resolve(data)
              }).catch(err => {
                reject(err)
              })
            } catch (error) {
              reject(error)
            }
          })
        },
        // 刷新Token
        refToken({state, commit }){
          return new Promise((resolve, reject) => {
            try {
              post('/refToken',{key:state.key}).then(({data}) => {
                commit('setToken',data.token)
                resolve(data)
              }).catch(err => {
                reject(err)
              })
            } catch (error) {
              console.error('登陆信息过期, 请重新登陆');
              reject(error)
            }
          })
        },
    }
})

/libs/request.js 这个文件主要负责封装好全局请求, 以及错误拦截处理

import axios from 'axios'
import Qs from 'qs'
import store from '@/store'

/**
 * @description: 在请求前我们做点啥
 * 可以在这里做过期时间校验, 在这里我就不做啥了
 */
axios.interceptors.request.use(config => {
    // 拦截请求数据 <=> 带上 token
    config.params.token = store.state.token;
    return config
}, err => {
  return Promise.reject(err)
})

/**
 * @description: 接到数据我们做点啥
 * @param {type} 
 * @return: 
 */
axios.interceptors.response.use(({data,status}) => {
  if(status >= 200 && status <= 401){
    return data;  //我们在这里直接放回数据的data, 直接是请求中服务器给的数据
  }else if (status === 402){
    console.error('登陆信息过期, 请重新登陆');
    store.dispatch('handleLogOut').then(()=>{
      // router.push('login');
    });
    return Promise.reject(data)
  }else{
    console.error(data)      
    // Message.warning('未知错误, 请重试');
    return Promise.reject(data)
  }
}, (error) => {
  const { response: { status }, config, } = {...error}
    if(status !== 401){
      console.warn('Error Code'+status)
      return Promise.resolve(error)
    }
    console.warn('Token 口令过期,正在重新获取');
    return store.dispatch('refToken').then(res=>{
        // 带上新token重新请求
      config.params.token = store.state.token;
      return axios(config)
    }).catch((res)=>{
      console.error(res)
      store.dispatch('handleLogOut');
      // router.push({name: 'login'});
      return Promise.reject(error);
    })
})

const request(url, data, method){
    retrun axios({url ,data:Qs.stringify(data),method})
}

export const post(url,data){
    return request(url,data,'post')
}

export const post(url,data){
    return request(url,data,'get')
}

@/libs/uilt.js 对缓存cookie的操作

// 导入js-cookie
import Cookies from 'js-cookie'
const cookieExpires = 7
export const USER_KEY = 'key'
export const TOKEN = 'token'

export const setKey = (val)=>{
  return Cookies.set(USER_KEY, val, { expires: cookieExpires || 1 })
}

export const getKey = ()=>{
  const user_key = Cookies.get(USER_KEY)
  if (user_key) return user_key
  else return false
}

export const setToken=(val)=>{
  return Cookies.set(TOKEN, val, { expires: cookieExpires || 1 })
}

export const getToken=()=>{
  const token = Cookies.get(TOKEN)
  if (token) return token
  else return false
}

最后

大概就这样了, 收到数据拦截判断状态码, 刷新token重新发送本次请求,在重新返回数据, 主要是为了兼容以前的代码, 本来就是接手的项目, 只能这样弄了, 下一次就要去做微信小程序的封装.