vue-动态路由+按钮级权限(四)之api封装以及拦截器
server/api/request
/**axios封装 * 请求拦截、相应拦截、错误统一处理 */ import axios from 'axios' import QS from 'qs' // import store from "../../store/index"; import router from '../../router/index' import db from '../../common/storage' import store from "@/store"; import { Message, MessageBox } from 'element-ui' // 环境的切换 if (process.env.NODE_ENV == 'production') { axios.defaults.baseURL = process.env.VUE_APP_API_URL1 } else { axios.defaults.baseURL = "" } // 请求超时时间 axios.defaults.timeout = 10000 // 请求拦截器 axios.interceptors.request.use( config => { // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了 // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断 const token = db.ss.get('token') const userId = db.ss.get('userId') token && (config.headers.token = token) userId && (config.headers.userId = userId) // 设置url的前缀 config.url = process.env.VUE_APP_URL_PORT + config.url if (config.url.indexOf("/sys/login") !== -1 && config.method == 'post') { config.data = QS.stringify(config.data) } else if (config.method == 'get') { config.params = { ...config.params, _t: Date.parse(new Date()) / 1000 } } return config }, error => { return Promise.error(error) } ) // 响应拦截器 let timer = false let path = '/login' axios.interceptors.response.use( response => { if (response.status === 200) { if (response.data.code == 401) { if (!timer) { timer = setTimeout(() => { MessageBox.alert('登录信息已过期,点击确认跳转至登录页', '提示', { confirmButtonText: '确认', callback: action => { if (action === 'confirm') { clearTimeout(timer) timer = null db.ss.clear(); store.state.userStore.asyncRoutes = []; setTimeout(() => { router.replace({ path: path, query: { redirect: router.currentRoute.fullPath } }) }, 1000) } } }) }, 0) } } else { return Promise.resolve(response) } } else { return Promise.reject(response) } }, error => { if (error.response && error.response.status) { switch (error.response.status) { case 401: router.replace({ path: path }) break case 403: // 清除token db.ss.clear() if (!timer) { timer = setTimeout(() => { MessageBox.alert('登录信息已过期,点击确认跳转至登录页', '提示', { confirmButtonText: '确认', callback: action => { if (action === 'confirm') { clearTimeout(timer) timer = null db.ss.clear(); store.state.userStore.asyncRoutes = []; setTimeout(() => { router.replace({ path: path, query: { redirect: router.currentRoute.fullPath } }) }, 1000) } } }) }, 0) } break // 404请求不存在 case 404: Message({ message: '请求不存在', type: 'error' }) break default: Message({ message: error.response.data.message, type: 'error' }) } return Promise.reject(error.response) } } ) /** * get方法,对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function get(url, params) { return new Promise((resolve, reject) => { axios .get(url, { params: params }) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) } /** * get方法,对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function getFile(url, params) { return new Promise((resolve, reject) => { axios({ method: 'get', url, params, headers: { 'Content-Type': 'application/json; application/octet-stream' }, responseType: 'blob', timeout: 100000 }).then((res) => { resolve(res) }).catch(err => { reject(err.data) }) }) } /** * post方法,对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function postFile(url, params, onUploadProgress) { return new Promise((resolve, reject) => { axios .post( url, params, { timeout: 100000, onUploadProgress }) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) } /** * get方法,对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function getJoin(url, params) { return new Promise((resolve, reject) => { axios .get(url, { params: params }) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) } /** * 封装put请求 * @param url * @param data * @returns {Promise} */ export function put(url, params = {}) { return new Promise((resolve, reject) => { axios.put(url, params).then( response => { resolve(response.data) }, err => { reject(err) } ) }) } /** * post方法,对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function post(url, params) { return new Promise((resolve, reject) => { axios .post(url, params) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) } /** * post方法,对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function del(url, params) { return new Promise((resolve, reject) => { axios .delete(url, { params: params }) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) }
其他使用
import { get, post, // put, // post, // del } from '../api/request' export const loginInter = data => { return get(`/system/login`, data) } export const saveSystemRoleAdd = data => { return post(`/system/role/add`,data) }
/**axios封装
* 请求拦截、相应拦截、错误统一处理
*/
import axios from 'axios'
import QS from 'qs'
// import store from "../../store/index";
import router from '../../router/index'
import db from '../../common/storage'
import store from "@/store";
import {
Message,
MessageBox
} from 'element-ui'
// 环境的切换
if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = process.env.VUE_APP_API_URL1
} else {
axios.defaults.baseURL = ""
}
// 请求超时时间
axios.defaults.timeout = 10000
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
const token = db.ss.get('token')
const userId = db.ss.get('userId')
token && (config.headers.token = token)
userId && (config.headers.userId = userId)
// 设置url的前缀
config.url = process.env.VUE_APP_URL_PORT + config.url
if (config.url.indexOf("/sys/login") !== -1 && config.method == 'post') {
config.data = QS.stringify(config.data)
} else if (config.method == 'get') {
config.params = {
...config.params,
_t: Date.parse(new Date()) / 1000
}
}
return config
},
error => {
return Promise.error(error)
}
)
// 响应拦截器
let timer = false
let path = '/login'
axios.interceptors.response.use(
response => {
if (response.status === 200) {
if (response.data.code == 401) {
if (!timer) {
timer = setTimeout(() => {
MessageBox.alert('登录信息已过期,点击确认跳转至登录页', '提示', {
confirmButtonText: '确认',
callback: action => {
if (action === 'confirm') {
clearTimeout(timer)
timer = null
db.ss.clear();
store.state.userStore.asyncRoutes = [];
setTimeout(() => {
router.replace({
path: path,
query: {
redirect: router.currentRoute.fullPath
}
})
}, 1000)
}
}
})
}, 0)
}
} else {
return Promise.resolve(response)
}
} else {
return Promise.reject(response)
}
},
error => {
if (error.response && error.response.status) {
switch (error.response.status) {
case 401:
router.replace({
path: path
})
break
case 403:
// 清除token
db.ss.clear()
if (!timer) {
timer = setTimeout(() => {
MessageBox.alert('登录信息已过期,点击确认跳转至登录页', '提示', {
confirmButtonText: '确认',
callback: action => {
if (action === 'confirm') {
clearTimeout(timer)
timer = null
db.ss.clear();
store.state.userStore.asyncRoutes = [];
setTimeout(() => {
router.replace({
path: path,
query: {
redirect: router.currentRoute.fullPath
}
})
}, 1000)
}
}
})
}, 0)
}
break
// 404请求不存在
case 404:
Message({
message: '请求不存在',
type: 'error'
})
break
default:
Message({
message: error.response.data.message,
type: 'error'
})
}
return Promise.reject(error.response)
}
}
)
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function getFile(url, params) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params,
headers: {
'Content-Type': 'application/json; application/octet-stream'
},
responseType: 'blob',
timeout: 100000
}).then((res) => {
resolve(res)
}).catch(err => {
reject(err.data)
})
})
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function postFile(url, params, onUploadProgress) {
return new Promise((resolve, reject) => {
axios
.post(
url,
params, {
timeout: 100000,
onUploadProgress
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function getJoin(url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, params = {}) {
return new Promise((resolve, reject) => {
axios.put(url, params).then(
response => {
resolve(response.data)
},
err => {
reject(err)
}
)
})
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function del(url, params) {
return new Promise((resolve, reject) => {
axios
.delete(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}