一、封装axios
import axios from 'axios'import qs from "qs" const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间//axios.defaults.baseURL = 'http://localhost:8080'; // http request 拦截器axios.interceptors.request.use( config => { if ($cookies.get("access_token")) { // 判断是否存在token，如果存在的话，则每个http header都加上token config.headers.Authorization ='Bearer '+ $cookies.get("access_token"); } return config; }, err => { return Promise.reject(err);}); // http response 拦截器axios.interceptors.response.use( response => { return response; }, error => { console.log("response error :"+error); if (error.response) { switch (error.response.status) { case 401: console.log("token 过期"); var config = error.config; refresh(config); return; } } return Promise.reject(error) // 返回接口返回的错误信息 });/**刷新token*/function refresh(config){ var refreshToken = $cookies.get("refresh_token"); var grant_type = "refresh_token"; axios({ method: 'post', url: '/oauth/token', data: handleParams({"grant_type":grant_type,"refresh_token":refreshToken}), timeout: TIME_OUT_MS, headers: {} }).then( (result) => { if(result.data.access_token){ //重新保存token $cookies.set("access_token",result.data.access_token); $cookies.set("refresh_token",result.data.refresh_token); //需要重新执行 axios(config); }else{ //this.$events.emit('goto', 'login'); window.location.reload(); } } ).catch((error) => { //this.$events.emit('goto','login'); window.location.reload(); });}/** @param response 返回数据列表*/function handleResults (response) { var result = { success: false, message: '', status: [], errorCode: '', data: {} } if (response.status == '200') { result.status = response.status; result.data = response.data; result.success = true; } return result} // function handleUrl (url) {// //url = BASE_URL + url// url =root +url;// // BASE_URL是接口的ip前缀，比如http:10.100.1.1:8989/// return url// } /** @param data 参数列表* @return*/function handleParams (data) { return qs.stringify(data);} export default { /* * @param url * @param data * @param response 请求成功时的回调函数 * @param exception 异常的回调函数 */ post (url, data, response, exception) { axios({ method: 'post', //url: handleUrl(url), url: url, data: handleParams(data), timeout: TIME_OUT_MS, headers: { //'Content-Type': 'application/json; charset=UTF-8' } }).then( (result) => { response(handleResults(result)) } ).catch( (error) => { if (exception) { exception(error) } else { console.log(error) } } ) }, /* * get 请求 * @param url * @param response 请求成功时的回调函数 * @param exception 异常的回调函数 */ get (url,data, response, exception) { axios({ method: 'get', url: url, params:data, timeout: TIME_OUT_MS, headers: { 'Content-Type': 'application/json; charset=UTF-8' } }).then( (result) => { response(handleResults(result)) } ).catch( (error) => { console.log("error"+response); if (exception) { exception(error) } else { console.log(error) } } ) }}
二、配置axios 跨域，以及请求baseUrl
1.config-->index.js
’'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') //引入跨域配置var proxyConfig = require('./proxyConfig') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: {}, //默认跨域配置为空 proxyTable: proxyConfig.proxy, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8886, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true }, build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // 项目名字改变时这里需要变化 原先为assetsPublicPath: '.' assetsPublicPath: './', /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }}
2.config目录下创建一个文件 proxyConfig.js文件
module.exports={ proxy:{ '/':{ //将localhost：8081 映射为 /apis target:'http://localhost:8080',//接口地址 changeOrigin: true,// 如果接口跨域，需要进行这个参数配置 secure:false, //如果接口是HTTPS接口，需要设置成true pathRewrite:{ '^/':'' } } }}
三、封装API 请求Url port.js
export default { oauth: { login: '/oauth/token', // 登录 logout: '/oauth/logout' // // 退出 }, user: { addUser: '/user/add', updateUser: '/user/update', getUser:'/user/', //+ Id exists:'/exists/', // +id enable:'/enable/', // +id disable:'/disable/', // +id delete:'/delete/', //+id password:'/password ', query:'/query' }}
四、main.js 引入
import http from './plugins/http.js'import ports from './plugins/ports'Vue.prototype.http = httpVue.prototype.ports = ports
五、使用
login.vue中使用
login() { this.http.post(this.ports.oauth.login,{username:this.userId, password:this.password,grant_type:'password'}, res => { if (res.success) { // 返回正确的处理 页面跳转 this.$events.emit('goto', 'edit'); } else { // 返回错误的处理 //alert("等待处理"); }},err =>{ //console.log("正在处理"+err.response.status); if(err.response.status=='400'){ //显示用户名或密码错误 this.$refs.username.focus(); this.$refs.hint.click(); } }) }