token处理 - axios请求拦截器统一注入

1. token理解

token 作为其它请求的用户标识，我们使用请求拦截器做一下统一处理，让每一个请求的 header 中都拥有 token

2. 初始化token状态

export default {
  namespaced: true,
  state: {
    token: null // 用户 Token，默认为 null
  },
  mutations: {

    // ========== 方法1 - 设置token ==========
    setToken(state, newToken) {
      state.token = newToken
    },

    // ========== 方法2 - 删除token ==========
    removeToken(state) {
      state.token = null
    }
  },
  actions: {},
  getters
}

3.token处理 - axios请求拦截器统一注入

• 思路
  将 token 保存到 vuex 中，接下来只需要在 axios 请求拦截器中取出token值再填充到 header 中即可。

• 代码逻辑
  1）如果当前 vuex中有 token，就在请求头中设置上。
  2）因为后端返回的 token 没有添加上 Bearer 字符串，因此我们需要手动添加。
  3）authorization 和 Bearer 是本项目的后端接口要求的写法。

import store from '@/store'
service.interceptors.request.use(
  config => {
    const token = store.state.user.token
    // 如果当前存有token,就加在请求头上
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  }
  , error => {
  return Promise.reject(error)
})