使用Vue在http請求頭中新增token

用到的技術：Vue， Vue-router， axios， Vuex
1.在Login.vue中通過傳送http請求獲取token

//根據api介面獲取token
 submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$ajax.post('/login/signin', this.loginForm).then(res => {
            if (res.data.returnCode === '100') { // ‘100’ 為自定義資料， 具體數值要和後端去統一商定
              const loginData = res.data
              const userInfo = res.data
              this.form.username = userInfo.returnData.username
              if (loginData.returnData.status === ' ') {
                this.dialogVisible = true
              } else {
                const userInfo = res.data
                localStorage.setItem('userInfo', JSON.stringify(userInfo))
                this.$store.commit('set_token', res.headers.token)
                this.$store.commit('changeHeadimg', userInfo.returnData.headimageurl)
                this.$store.commit('changeUserInfo', JSON.stringify(userInfo))
                this.$router.push('/')
              }
            } else {
              this.$message({
                message: res.data.returnMsg,
                type: 'warning'
              })
            }
          })
        } else {
          return false
        }
      })
    },
 

2.在store.js中對token狀態進行監管

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutation'
import actions from './action'
import getters from './getter'

Vue.use(Vuex)

const state = {
  username: localStorage.getItem('userInfo') || {}, // 使用者名稱
  logined: JSON.parse(localStorage.getItem('userInfo')) || false, // 是否登入狀態
  token: '',
  pdfModel: false,
  headimageurl: ''
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

 

3.在router/index.js中將token新增到store中

import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex/store'
Vue.use(Router)
if (localStorage.getItem('token')) {
  store.commit('set_token', localStorage.getItem('token'))
}
if (localStorage.getItem('headUrl')) {
  store.commit('changeHeadimg', localStorage.getItem('headUrl'))
}

 

4.在main.js中定義全域性的配置：

import axios from 'axios'
axios.defaults.baseURL = '/api' // 開發本地代理
axios.defaults.headers.post['Contenst-Type'] = 'application/json;'
axios.defaults.headers.common['token'] = store.state.token  // 在header中新增token
Vue.config.productionTip = false
Vue.prototype.$ajax = axios

5.在src/main.js中新增必要的攔截器

if (localStorage.getItem('token')) {
  store.commit('set_token', localStorage.getItem('token'))
}
const myfilter = {
  bzdate: (date) => {
    if (date) {
      let timestring = new Date(date)
      return timestring.toLocaleDateString() + ' ' + timestring.toTimeString().substr(0, 8)
    }
  }
}
for (let key in myfilter) {
  Vue.filter(key, myfilter[key])
}
// 新增請求攔截器
axios.interceptors.request.use(function (config) {
  // 在傳送請求之前做些什麼
  // 判斷是否存在token,如果存在將每個頁面header新增token
  if (store.state.token) {
    config.headers.common['token'] = store.state.token
  }
  return config
}, function (error) {
  router.push('/login')
  return Promise.reject(error)
})
// 新增響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應資料做點什麼
  return response
}, function (error) {
  // 對響應錯誤做點什麼
  if (error.response) {
    switch (error.response.status) {
      case 401:
        store.commit('del_token')
        router.push('/login')
    }
  }
  return Promise.reject(error)
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  if (to.path !== '/login' && !localStorage.getItem('userInfo')) {
    next({path: '/login'})
  } else {
    next()
  }
})