axios 登录拦截设置

axios对Ajax进行了封装，在前端开发中应用普遍应用，在vue-cli中已经默认被集成，在Git上也有5W+star.

在项目中，一般前后端都会对http状态码做一些统一处理：

1. 500服务器错误，404找不到页面，403没有权限等
2. 在200状态码的时候还可以前后协商一些自定义状态码对一些错误进行处理，可以弹出告知用户，也可以在控制台打印或者以日志形式存储，根据不同的项目情况来处理

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });
 
// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
                case 404:
                  ...跳转404界面
                case 500:
                  ....跳转500界面
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });

以上关于token的认证机制，会单独开一篇文章来讨论，一个简易写拦截器就完成了，如果要优化交互和代码 可以对错误做统一的处理，比如：

import {Message, MessageBox} from 'element-ui'
//引入element 的Message组件，统一做弹窗提示

还可以统一对一些http头进行配置

const instance = axios.create({
  baseURL: 'http://localhost:8080/',
  // 设置ajax请求超时时间
  timeout: 10 * 1000,
  // 是否自动设置cookie
  withCredentials: true
})