14.记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios -S
axios 的封装使用请求带上token，token通过登录获取存在vuex，为防止刷新丢失token使用持久化 vuex-persistedstate 插件保存数据
npm i -S vuex-persistedstate
import persistedState from 'vuex-persistedstate'export default new Vuex.Store({
// ...
plugins: [persistedState()]})axios 的封装可以全局捕捉接口异常或者是断网的情况的处理，也可以优化接收到的后台数据，处理后返回至前端，首先还是在 src 文件夹下创建 api 文件夹，创建一个封装 axios 的JS文件，命名为：https.js ，然后在 main.js 文件配置全局
https.js 文件
import axios from 'axios'import { Message } from 'view-design'; // 引入iview的消息提示组件，用于提示接口的报错等import store from '../store/index'; // 引入vuex-store// 创建axios实例axios.defaults.withCredentials = true;const httpService = axios.create({
baseURL: "", // 需自定义 // url前缀-'http:xxx.xxx'
timeout: 900000, // 需自定义 请求超时时间 十五分钟
withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证});// request拦截器httpService.interceptors.request.use(
config => {
if (store.state.token) {
console.log(store.state.token);
config.headers['token'] = store.state.token // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config;
},
error => {
// 请求错误处理
return Promise.reject(error);
})// respone拦截器httpService.interceptors.response.use(
response => {
let msg = ""
if (response.status == 200) {
switch (response.data.code) {
case 1000:
msg = response.data.msg // Message['success']({
// background: true,
// content: msg,
// duration: 3
// })
break;
default:
msg = response.data.msg
Message['error']({
background: true,
content: msg,
duration: 10,
closable: true
})
}
// 统一处理状态
return Promise.resolve(response.data.data)
} else {
return Promise.reject(response)
}
},
// 处理处理
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求';
break;
case 401:
error.message = '未授权，请重新登录';
break;
case 403:
error.message = '拒绝访问';
break;
case 404:
error.message = '请求错误,未找到该资源';
break;
case 500:
error.message = '服务器端出错';
break;
default:
error.message = `未知错误${error.response.status}`;
}
Message['error']({
background: true,
content: error.message,
duration: 10,
closable: true
})
} else {
error.message = "连接到服务器失败";
Message['error']({
background: true,
content: error.message,
duration: 10,
closable: true
})
}
return Promise.reject(error);
})/*网络请求部分*//*
* get请求
* url:请求地址
* params:参数
* */export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params }).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});}/*
* delete请求
* url:请求地址
* params:参数
* */export function del(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.delete(url, {
params: params }).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});}/*
* delete请求体
* url:请求地址
* params:参数
* */export function delc(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.delete(url, {
data: params }).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});}/*
* post请求
* url:请求地址
* params:参数
* */export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.post(url, params)
.then(response => {
resolve(response);
})
.catch(error => {
reject(error);
})
// httpService({
// url: url,
// method: 'post',
// data: params
// }).then(response => {
// resolve(response);
// }).catch(error => {
// reject(error);
// });
});}/*
* put请求
* url:请求地址
* params:参数
* */export function put(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.put(url, params)
.then(response => {
resolve(response);
})
.catch(error => {
reject(error);
})
});}/*
* 文件上传
* url:请求地址
* params:参数
* */export function upload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});}export default {
get,
del,
delc,
post,
put,
upload}在 main.js 文件里引用 https
import http from '@/api/https.js'Vue.prototype.$http = http
页面调用
this.$http.get(url, { custcode: "" }).then(res =>{})this.$http.post(url, { data }).then(res =>{})this.$http.put(url, { data }).then(res =>{})this.$http.del(url, { id: "" }).then(res =>{})
作者：前端小白在线刮痧
链接：https://www.jianshu.com/p/8b44185e2ec4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。