axios请求拦截器和响应拦截器

vue实现用户登录页面，登录成功后，需在所有请求头中添加sessiontoken，值为登陆成功的返回值uuid，响应头 “sessiontoken”，需要作为登陆后每次请求的“sessiontoken”请求头，建议放置到Cookie或localStorage中。同时，前端需要生成一个PageToken放置到sessionstorage中，作为登陆后每次请求的“PageToken”请求头，用于验证当前标签页是否属于当前用户。响应头中的SessionStatus值用户判断用户登录状态

                0 验证通过，无需跳转

                1 用户已登录（自动跳转到地图页面）

               -1 当前请求无SessionToken或PageToken，无权限

               -2 用户未登录 或 用户长时间无操作，登录超时

               -3 用户在其他地方登录，当前用户被迫下线

               -4 当前标签页不属于当前用户

            （-1~-4需要跳转到登录页面（login.vue））

新建三个js文件，分别为http.js文件、store.js

http.js文件为axios请求拦截器和响应拦截器

export const request = (config) => {
  return axios(config)
};
//添加请求拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('sessiontoken') && sessionStorage.getItem('PageToken')) {
      //将localstorage中的sessiontoken和sessionstorage中的PageToken添加到请求头中
      config.headers.common['sessiontoken'] = localStorage.getItem('sessiontoken');
      config.headers.common['PageToken'] = sessionStorage.getItem('PageToken');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  });

// 添加响应拦截器，获取响应头的token
axios.interceptors.response.use(response => {
  if (response.status === 200 && response.config.method != 'options') {  //响应成功后
    let sessionStatus = response.headers['sessionstatus'];
    if (response.headers['sessiontoken']) {  //获取响应头里面的数据
      store.state.sessiontoken = response.headers['sessiontoken'];
    }
    if (sessionStatus == -1) {
      Message({
        type: 'warning',
        message: '无权限！'
      });
      localStorage.removeItem('sessiontoken');
      store.commit('loginSuccess', null);
      router.replace({
        path: '/login',
        query: {
          redirect: router.currentRoute.fullPath
        }
      });
    }
    if (sessionStatus == -2) {
      Message({
        type: 'warning',
        message: '登录超时！'
      });
      localStorage.removeItem('sessiontoken');
      store.commit('loginSuccess', null);
      router.replace({
        path: '/login',
        query: {
          redirect: router.currentRoute.fullPath
        }
      });
    }
    if (sessionStatus == -3) {
      Message({
        type: 'warning',
        message: '当前用户已在其他地方登录！'
      });
      localStorage.removeItem('sessiontoken');
      store.commit('loginSuccess', null);
      router.replace({
        path: '/login',
        query: {
          redirect: router.currentRoute.fullPath
        }
      });
    }
    if (sessionStatus == -4) {
      Message({
        type: 'warning',
        message: '该标签页不属于当前用户！'
      });
      localStorage.removeItem('sessiontoken');
      store.commit('loginSuccess', null);
      router.replace({
        path: '/login',
        query: {
          redirect: router.currentRoute.fullPath
        }
      });
    }
    return Promise.resolve(response);
  } else {
    return Promise.reject(response);
  }
}, error => {  //报错后的处理，这里不是重点，
  // 服务器状态码不是200的情况
  if (error.response.status) {
    switch (error.response.status) {
      case 401:
        alert('登录过期，请重新登录');
        // 清除token
        localStorage.removeItem('sessiontoken');
        store.commit('loginSuccess', null);
        setTimeout(() => {
          router.replace({
            path: '/login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
        }, 1000);
        break;
      case 404:
        alert('网络请求不存在');
        break;
      case 504:
        alert('服务器内部异常');
        break;
      // 其他错误，直接抛出错误
      default:
        alert("请求错误：" + error.response.status);
    }
    return Promise.reject(error.response);
  }
});

export default axios

store.js为设置localstorage用于存储sessiontoken

const store = new Vuex.Store({
  state: {
    // 存储token
    sessiontoken: localStorage.getItem('sessiontoken') ? localStorage.getItem('sessiontoken') : ''
  },

  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (state, user) {
      state.sessiontoken = user.sessiontoken;
      localStorage.setItem('sessiontoken', user.sessiontoken);
    }
  }
});

export default store;

在登录界面设置sessiontoken用于存储PageToken

 self.PageToken=Math.random().toString(36).substr(2);
 sessionStorage.setItem('PageToken',self.PageToken);

最后在main.js文件中设置

axios.defaults.headers.common['sessiontoken'] = store.state.sessiontoken;
axios.defaults.headers.common['PageToken'] = sessionStorage.getItem('PageToken');