项目中对于token的常用处理

1 存放

• 项目中许多请求都是要token字符串的，所以把token字符串放到vuex中比较合适，一来方便获取，二来vuex是响应式的。
• 当页面刷新时，vuex中的数据就会消失，所以需要对vuex做持久化处理，这里是把token字符串进行本地处理（localStorage）

2 发送请求时

许多请求都是要token字符串的，如果每次发送请求都写一遍（下图代码），比较麻烦

  headers: {
    Authorization: "Bearer token"
  }

这里使用axios提供的请求拦截器，也就是每个请求都需要先经过这个请求拦截器，然后才能发送给后端服务器，在 src/utils/request.js 中添加拦截器统一设置 token：

import axios from 'axios'
import store from '@/store'

const request = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn/' // 接口的基准路径
})

// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
  // Do something before request is sent
  // config ：本次请求的配置对象
  // config 里面有一个属性：headers
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

// 响应拦截器

export default request