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);
}
});
},
前端菜鸟,各位大佬多多指教