vue axios跨域请求拦截器封装

以后台管理系统为例：

login----->index

import { setToken } from '../utils/auth' //导入cookis 存储数据方法  es6的局部导入

aa() {
            var _this = this;
            this.axios.get("apl/sso/user/login?username=zhangsan&password=zhangsan")
                .then(function(res) {
                    // console.log(res.data);

                    // 将token存储
                    localStorage.setItem('token',res.data.data);
             
                    if(res.data.code == 10000){
                        alert("登陆成功!")
                    //    _this.$router.push({ path: "/partnerPeople/partnerList" });
                        setToken(res.data.data) // token 存在本地的cookis里面
                         console.log(res.data.data)
                        _this.$router.push({ path: "/index" });
                    }
                })
                .catch(function(err) {
                    console.log(err);
                });
        },

index之内的所有请求都需要在一个主拦截器提现是否进入

1.引入js-coolkie文件

import Cookies from 'js-cookie' // npm  安装的 他们2个也要重新拉去代码安装的

const TokenKey = 'Admin-Token'//自己取个名字 但要知道他存储的什么  token

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

2.创建axios路由请求实例

import axios from 'axios'
import {
  getToken,
  
} from './auth'
// import Vue from 'vue'
import router from '../router'
// 创建axios实例
const service = axios.create({
//   baseURL: process.env.BASE_API, // 也就是你请求后台的端口
  baseURL: 'http://192.168.0.115:9001/', // 也就是你请求后台的端口 http://192.168.0.155:9000/sso/user/login/zhangsan/zhangsan
  timeout: 25000, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  if (getToken()) {
      console.log(getToken())
    config.headers['Authorization'] = getToken()
  }
  return config
}, error => {
  // Do something with request error
    // 后期配置一个500 页面 报错的时候就去500页面
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    // 这里存在没有返回值的情况
    // debugger
    const res = response
    // console.log("张三")
    // 请求后台成功 回调函数
    return Promise.reject()
  },
  error => {
    // console.log('err' + error)
    //失败了 出来回到函数
    /* router.push({
      path: '/500'
    }) */
    return Promise.reject(error)
  }
)

export default service

3.由于每次操作都需要带入token，在请求过程中请求token是否依然存在，不存在则转至login页面

import router from '../router'


import {
    getToken
} from './auth'
const whiteList = ['/404', '/500','/login'] // 白名单暂时不需要 可以删除
router.beforeEach((to, from, next) => {

  //404页面（！to.matched.lengt判断将要去的页面是否与项目配置路由一致，不一致则跳转至404页面

if(!to.matched.length){
    	next({
    		path:'/404'
    	})
    }
    var token = getToken();
    if(token){
        console.log('登陆了')
        if (to.path === '/login') {
            next({
              path: '/'
            })
        } else {
            next()
        }
    }else {
        console.log('没有登录')
        if (whiteList.indexOf(to.path) !== -1) {
            next()
        } else {
            next({
                path: '/login'
            })
        }
    }
})

router.afterEach(() => {
 
})