vue如何配置用户登录路由守卫,在路由中使用iview的加载进度
2019-04-19 本文已影响144人
辉夜真是太可爱啦
首先是路由守卫
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);
});