Vue2+axios封装，实现用户token登录管理

Vue2+axios 封装，实现用户token登录管理

一个小项目，用户登录生成token，并放在请求头中带给后台做验证，token到期或者错误时将用户踢下线

1.新建一个文件m_api.js，放入api文件夹中，我项目的src目录如图所示，可用做参照
2. 引入axios，并创建axios实例,代码如下:`

// let Base64 = require('js-base64').Base64;
import axios from 'axios';
//import Router from 'router';
import Router from '../router/index';  //index 是router文件夹下面的

let vuer = null; // vue对象，由前台传递过来

var service = axios.create({
  baseURL:'',
  timeout:'1000*60*5'
  // headers:{'Authorization':this.$store.state.user.userToken}
});
// 因为我用的是store做的状态管理，在项目刚启动时是没有this.$store.state数据的
// 直接在这里定义请求头会报错，所以将请求头写在了第四步

3.根据创建的axios实例设置请求拦截器和相应拦截器：
前面查的时候也看到有人说在页面引入router或者router文件夹下的index.js文件，也试过了但是并没有效果，最后还是用了传递vue对象的这种方法，感觉有点笨，大佬们有好的方法吗

// request请求拦截器
service.interceptors.request.use(config => {
  return config
}, error => {
  return Promise.reject(error);
});

// respone拦截器
service.interceptors.response.use(
  response => {
    if (response.data.code == 'Success') {
      return response;
    }else if (response.data.code == "TokenExpiredError") { // 后台返回token过期的状态码
	   /* 请依据你的项目实际code进行判断以及操作 */
      // location.href = '/login';  这是路由跳转的另一种方式，使用 location.href 跳转的话就不需要传递vue对象过来了，但是好像有点问题
      // 如果token已过期，则返回登录页面，并且清除你的Cookie或者Session信息，我这里使用store
      this.$store.commit('changeAuthority', null);
      this.$store.commit('logout');
      //Router.push('/login');  测试无效
      vuer.$router.push({path: '/login'});  // vuer是前台传递过来的vue对象，在第四步中有说明
      return Promise.reject(406); //成功后的失败返回的错误
    }
  },
  error => {
    return Promise.reject(error);
  }
);

4.封装axios请求,我是依照请求方式来进行封装的,一个方式一个接口,如

// that是vue接口调用时传过来的vue实例,这样就可以使用that实现路由跳转
export const postRequest = function (url, that, params = {} ) {
    vuer = that; 
    return new Promise((resolve,reject) =>{
      service.post(url, params,{headers: {'Authorization':this.$store.state.user.userToken}}).then( success => {
            resolve(success.data);
        }).catch(err => {
            reject(err);
        })
    });
};
export const getRequest = function (url, that, params = {}) {
	vuer = that;
    return new Promise((resolve,reject) => {
      service.get(url, params，{headers: {'Authorization':this.$store.state.user.userToken}}).then( success => {
            resolve(success.data);
        }).catch(err => {
            reject(err);
        });
    })
};

5.到这里接口封装就已经基本完成了，然后我们需要在main.js中进行引用：

import Vue from 'vue';
import iView from 'iview';
import {router} from './router/index';
import {appRouter} from './router/router';
import {appRouter2} from './router/router';
import store from './store';

import App from './app.vue';

import Axios from 'axios';

import {postRequest} from './api/m_api';
import {getRequest} from "./api/m_api";
import {putRequest} from "./api/m_api";
import {postRequestJson} from "./api/m_api";
// require('./mock');
Vue.prototype.$http = Axios; // 将Axios挂载到Vue实例中的ajax上面，在项目中任何位置都能通过this.$http访问
Vue.prototype.postRequest = postRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.postRequestJson = postRequestJson;

6.接口的调用

doGetPage() {
		let that = this；//将vue对象传递给axios，让其可以调用vue的方法，如$router,$Message，就可以实现在相应拦截器直接跳转路由，页面无需在处理
        this.postRequest('/api/getUserReview', that, params).then(res => {
          //数据处理
          console.log（res）；
        }).catch(err => {
          if (err == '406') {
            this.$Message.warning('当前登录已失效,请重新登录!');
          }else {
            this.$Message.error(err);
          }
        });
      },

前端菜鸟，各位大佬多多指教