首先创建 一个 http 文件 (看自己 习惯)
然后 创建 request.js 文件
import Axios from "axios";
//引入axios
import store from "../store";
//引入 vuex
import router from "../router";
//引入路由
var baseURL = `https://www.liulongbin.top:8888/api/private/v1/`;
//基本域名
const instance = Axios.create({
baseURL,
timeout: 5000, //超时时间
});
//创建实例
// 添加请求拦截器
// 在发送请求之前进行拦截
instance.interceptors.request.use(
//
function(config) {
// 在发送请求之前做些什么 如果 本地存储·里面 有 token 数据
// 上面 引入了 store 所以 这里 不需要 使用 $ 符号
if (store.state.token) {
config.headers.Authorization = store.state.token;
//在配置的头信息里添加授权字段=vuex里的token
}
//如果vuex中有token,证明已经登陆了,在发送请求的时候携带token
// 在请求的头信息里 的Authorization字段携带token
return config;
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
function(response) {
// 对响应数据做点什么
// console.log(response);
if (response.data.msg === "无效token") {
router.push({
path: "/login",
});
}
return response;
//如果后台返回的数据告诉我们 token是无效的 就跳转到登陆页面
},
function(error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
// 封装http方法,如果请求成功就把请求到的数据return 如果响应失败就执行失败的catch函数
// data是post的传参 params是get的传参
export default function http(url, method, data = {}, params = {}) {
return instance({
url, //简写 地址
data, // 参数
method, // 方法 get/post
params,
})
.then((res) => {
console.log(res);
if (res.status >= 200 && res.status < 300) {
return res;
} else {
return Promise.reject(res.data.meta.msg);
//失败的回调
}
})
.catch((err) => {
return Promise.reject(err);
//走失败的回调
});
}
// axios拦截器 就是对请求和响应进行拦截,拦截之后做一些事情,做完之后才继续放行
还有一个参数 的处理 qs
cnpm i qs --save
在main.js中 引入
import http from "./http/request.js";
Vue.prototype.$http = http;
//全局引入http方法
页面中
submit() {
this.$http("/login", "post", {
username: this.obj.username,
password: this.obj.password,
}).then((res) => {
console.log(res);
// 如果 状态码 对的话 就 调用 vuex 里 的方法
if (res.data.meta.status == 200) {
this.$store.commit("settoken", {
// 把 token 存到 vuex 里面 去
token: res.data.data.token,
// 用户名 也存到 vuex 里面
user: this.obj.username,
});
//存入 成功之后 就 可以 跳转到 /user 的页面 去 了
this.$router.push({ path: "/users" });
}
});
},