axios请求拦截器

1.路由拦截
在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
        },
        component: Repository
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

 定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (token) {  // 判断当前的token是否存在
            next();
        }
        else {
            next({
               path: '/login',
               query: {redirect: to.fullPath} //将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next();
    }
})

 

这种方式只是简单的前端路由控制，并不能阻止用户访问，假设有一种情况：当前token失效了，但是token依然保存在本地。这时候你去访问需要登录权限的路由时，实际上应该让用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

2.http拦截器
要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回错误状态码，让用户重新登录。

import axios from 'axios';
const service = axios.create({
    baseURL: '/lll',
    timeout: 20000
})
//请求头转换拦截
service.interceptors.request.use(
  config => {
    if (config.method == 'post' && config.data) {
      config.headers = {
        'Content-Type': 'multipart/form-data',
      }
      const formData = new FormData();
      Object.keys(config.data).forEach((key) => {
        formData.append(key, config.data[key]);
      });
      config.data = formData
    }else if(config.method == 'patch' && config.data){
      config.headers = {
        'Content-Type': 'application/json'
      }
      config.method = 'post';
    }else{
      if (stoken) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.Authorization = `token ${store.state.token}`;
       }
    }
    
    /**统一添加头 */
    // config.headers={
    //   "X-Requested-With":"XMLHttpRequest"
    // };

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//http response 拦截器
service.interceptors.response.use(
  response => {
    if (response.data.success) {
      return response;
    } else if ( response.data.status === 400) {
      router.push('/login')
      return response;
    } else {
      return response;
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default service;