vue如何配置用户登录路由守卫,在路由中使用iview的加载进度条以及axios错误拦截

首先是路由守卫

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router);

const router = new Router({
    mode:'history',
    routes:[]
})

router.beforeEach((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    if(sessionStorage.getItem('token')){

    }else{
      router.push('/login');     //当跳转页面不是login而且没有携带token的时候跳转到登录页
    }
  }
  iView.LoadingBar.start();

  next();   //一定要加next();才会路由跳转
});

router.afterEach(route => {
  iView.LoadingBar.finish();
});


export default router;

axios的错误拦截我写在了main.js

axios.interceptors.response.use(response => {
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400: err.message = '请求错误(400)'; break;
      case 401: this.$router.push('/login'); break;
      case 403: err.message = '拒绝访问(403)'; break;
      case 404: err.message = '请求出错(404)'; break;
      case 408: err.message = '请求超时(408)'; break;
      case 500: err.message = '服务器错误(500)'; break;
      case 501: err.message = '服务未实现(501)'; break;
      case 502: err.message = '网络错误(502)'; break;
      case 503: err.message = '服务不可用(503)'; break;
      case 504: err.message = '网络超时(504)'; break;
      case 505: err.message = 'HTTP版本不受支持(505)'; break;
      default: err.message = `连接出错(${err.response.status})!`;
    }
  } else {
    err.message = '连接服务器失败!'
  }
  message.error(err.message);
  return Promise.reject(err);
});

你可能感兴趣的:(vue如何配置用户登录路由守卫,在路由中使用iview的加载进度条以及axios错误拦截)