Vue设置token拦截以及给每个api加上Authorization请求头

登录页面的代码 Login.vue

关键代码为第34行

this.$store.commit("set_token", response.data.data);

set_token是store/index.js中mutations里的函数名

 1 
15 
16 
48 
49 

接下来store里面的代码如下:

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 
 4 Vue.use(Vuex)
 5 
 6 export default new Vuex.Store({
 7   state: {
 8     token: ''
 9   },
10   mutations: {
11     set_token(state, token){
12       state.token = token;
13       sessionStorage.token = token
14     }
15 
16   },
17   actions: {
18   },
19   modules: {
20   }
21 })

router/index.js里面增加以下代码:

1 if (sessionStorage.getItem("token")){
2     store.commit("set_token", sessionStorage.getItem("token"))
3 }

最后在main.js里增加axios的请求和响应拦截器

 1 // 添加请求拦截器
 2 axios.interceptors.request.use(function (config) {
 3   // 在发送请求之前做些什么
 4   // 判断是否存在token,如果存在将每个页面header添加token
 5   if (store.state.token) {
 6     config.headers.common['Authorization'] = "Bearer " + store.state.token
 7   }
 8   return config
 9 }, function (error) {
10   router.push('/login')
11   return Promise.reject(error)
12 })
13 // 添加响应拦截器
14 axios.interceptors.response.use(function (response) {
15   // 对响应数据做点什么
16   return response
17 }, function (error) {
18   // 对响应错误做点什么
19   if (error.response) {
20     switch (error.response.status) {
21       case 401:
22         store.commit('del_token')
23         router.push('/login')
24     }
25   }
26   return Promise.reject(error)
27 })