axios的使用
// main.js
// 将axios方法挂载到全局的http对象上
Vue.prototype.$http = axios;
// login.vue
methods: {
async handleLogin(e) {
e.preventDefault();
// console.log('登录');
// const res = await this.$http.get('/api/login', {params: {
// username: this.model.username,
// password: this.model.password
// }});
const res = await this.$http.post('/api/login', {
username: this.model.username,
password: this.model.password
});
console.log(res);
const {code, token, message} = res.data;
if (code == 0) {
// 登录成功
localStorage.setItem('token', token); // 缓存至本地
this.$store.commit('setToken', token);// 存入store
// 回跳
const redirect = this.$route.query.redirect || '/';
this.$router.push(redirect);
} else{
// 登录失败 显示错误 cube-ui
const toast = this.$createToast({
time: 2000,
txt: message || '登录失败',
type: 'error'
});
toast.show();
}
}
},
拦截器
// 拦截axios所有http请求，预先放入token请求头
import axios from "axios";
import store from "./store";
import router from "./router";
// 请求拦截器
axios.interceptors.request.use(config => {
if (store.state.token) {
// 若存在令牌，则放入请求头
config.headers.token = store.state.token;
}
return config;
});
// 响应拦截器，提前预处理响应
axios.interceptors.response.use(
response => {
// 如果code是-1，说明用户已注销或者token已过期
// 此时需要重新登录，并且还要清楚本地缓存信息
if (response.status == 200) {
const data = response.data;
if (data.code == -1) {
clearHandler()
}
}
return response;
},
err => {
if (err.response.status === 401) { // 未授权
clearHandler()
}
return Promise.reject(err);
}
);
function clearHandler() {
// 清空缓存
store.commit("setToken", "");
localStorage.removeItem("token");
// 跳转至登录页
router.push({
path: "/login",
query: {
redirect: router.currentRoute.path
}
});
}
