登录相关

首先分析src/utils/request.js文件，源码如下：

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
 
const service = axios.create({
  baseURL: process.env.BASE_API,  
  timeout: 20000  
})

首先引入axios与MessageBox。接着引入了store和token，这两个我们没有接触过，接下来分析一下这两个组件的用处。

vuex store的使用

我们点进去store所在文件，源码如下：

Vue.use(Vuex)

const initPlugin = store => {
}

const store = new Vuex.Store({
  modules: {
    app,
    user,
    cacheView,
    help
  },
  state: { },
  plugins: [initPlugin],
  actions,
  mutations,
  getters
})

export default store

vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。我们在request.js文件中引入此组件之后，就可以使用这个建立状态管理。一个完整的store架构包含：

 state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },

但是request.js中并没有用到这个组件，不知道是什么原因。

token相关

我们点进去这个utils/auth.js文件，部分源码如下：

不难发现，这个是用来身份验证的，提供了一系列和token相关的方法。

什么是token：

Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，很麻烦，而token可以避免这种麻烦。

Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

回到最初的request.js文件，接着代码中创建了一个axios实例，并定义了baseURL和超时时间timeout。

登录时的request拦截器

request.js文件中接下来的源码如下：

service.interceptors.request.use(
  config => {
    config.headers['Authorization'] = (getToken() == null || getToken() == undefined) ? '' : getToken()
    return config
  },
  error => {
    // Do something with request error
    Promise.reject(error)
  }
)

config的目的是每次请求之前都在请求中携带token，给headers中的Authorization字段中赋值token，判断逻辑如下：

1. 如果getToken方法（这个方法是引入的auth组件中的方法，上文有提到）返回null或者undefined，就赋值为null

2. 否则就把真实的token复制给eaders中的Authorization字段。

这样，每次请求时都会携带token，后台验证不验证token就是后台的问题了。

登录时的response拦截器

接下来的代码将设置token的回复拦截器，对回执码错误的进行操作处理，源码如下：

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code == '50008' || res.code == '50012' || res.code == '50014') {
      MessageBox.confirm(
        '你已被登出，可以取消继续留在该页面，或者重新登录',
        '重新登录',
        {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        sessionStorage.clear()
        localStorage.clear()
        window.location.href = "/";
      })
    }
    else if (res.code !== '200') {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      return response.data
    } else {
      return response.data
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

可以看出来整个的逻辑和AJ-Report项目分析（6）中response拦截器是很相似的。

状态码含义如下：

 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;

满足三者之一，就会有弹窗提示，我们可以选择点击重新登录，之后通过：

window.location.href = "/";

回到登录页面。

AJ-Report项目分析（7）