提示:登录时需要后端将生成token返回给前端,前端将token保存在localstorage中,才进行下面操作
axios的安装
npm install axios vue-axios
axios在vue的配置与使用
在main.js中引入axios和vue-axios
importaxiosfrom'axios'importVueAxiosfrom'vue-axios
在vue中使用axios和vue-axios
Vue.use(VueAxios,axios);
https://www.cnblogs.com/Yancyzheng/p/11319791.html
配置axios基础地址
axios.defaults.baseURL ='地址'
配置axios基础请求头
axios.defaults.headers.post['Content-Type'] = Content-Type:'application/json; charset=UTF-8'
在进行请求的时候直接使用即可
this.axios.post("请求地址", {para:"参数"}, {}).then(res=>{// res即为请求结果})
请求响应拦截
// 请求拦截axios.interceptors.request.use(config=>{consttoken =localStorage.getItem('token');if(token) {// 在发起请求前,给所有请求的头部添加tokensconfig.headers.common['token'] =JSON.parse(token).token; }returnconfig;},error=>{// 对请求失败做处理returnPromise.reject(error);})// 响应拦截axios.interceptors.response.use(res=>{// 对响应数据做处理// console.log("对响应数据做处理")constcode = res.data.code;if(code ===401) {// 判断res.data.res_code 是否是401 如果是则跳转到登录,如果不是则正常返回ElementUI.Message({message:'请登录',type:'warning'}); router.push('/login')// 删除token以及userlocalStorage.removeItem('user')localStorage.removeItem('token')returnfalse; }elseif(code === -104) { ElementUI.Message({message:'系统异常',type:'warning'});returnfalse; }returnres;},error=>{// 对响应错误做处理returnPromise.reject(error);})