http状态码拦截

最新推荐文章于 2024-07-31 16:31:24 发布

原创最新推荐文章于 2024-07-31 16:31:24 发布 · 796 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍了一个基于Vue.js的应用程序配置实例，包括引入Vue、Vuex、Axios等库的方法，设置全局HTTP请求拦截器实现错误统一处理及状态码判断后的页面跳转，并展示了如何通过路由守卫进行页面标题的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import router from './router'
import App from './App'
Vue.use(Vuex);
Vue.prototype.$http = axios;
Vue.prototype.$http.defaults.withCredentials=true;
 
Vue.prototype.$http.interceptors.response.use(response => {
  console.log(response)
  if (response.data.resCode== "1000") {
    localStorage.clear();
    alert(response.data.resMsg)
    router.push({
      name:'login'
    })
  }
  return response;
}, error => {
  if (error && error.response) {
    switch (error.response.status) {
      case 404:
        router.push({name:'error-404'});
        // error.message = '请求出错(404)'
        break;
      
      case 500:
        router.push({ name:'error-500'});
        //  error.message = '服务器错误(500)';
        break;
     
      default: error.message = `连接出错(${error.response.status})!`;
    }
  }
  return Promise.reject(error);
});
/**
 *  日志输出开关
 */
Vue.config.productionTip = true
/* eslint-disable no-new */
 
router.beforeEach((to,from,next)=>{
  window.document.title=to.meta.title;
  next();
});
router.afterEach((to,form,next)=>{window.scrollTo(0,0)});
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})