一 路由拦截器
项目中，用户不登录只能去登录页面，不可以访问别的页面，这种情况的话，可以用路由拦截器
1. 先说下区分下route与router
- route：相当于当前正在跳转的路由对象。可以从里面获取name，path，params，query等。
如取路由带来的参数：this.$route.params - router：VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
//带参数路由跳转
this.$router.push({path:'/home',params:{id:123}})
//取参数
this.$route.params.id //123
-
两个的打印如下：
2e0d46f2fc13f4c5b7c7e720718b741.png
2. 言归正传说路由拦截
//路由拦截器
//to为向后走的路由对象，包括路由的完整信息
//from为从哪跳来的路由对象
//next()控制路由向下走，重新定义路由跳转的路由next(‘路由路径)
/** 验证用户是否登录 **/
router.beforeEach((to,from,next) => {
if(to.matched.some( m => m.meta.auth)) {
// console.log("先判断是否登录");
if(to.name=='Login'){
next();
}else{
if(localStorage.getItem('token')){
//访问服务器缓存数据，判断当前token是否失效
Vue.http.get("http:xxxx/Login/UserIsLogin?token="+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
// console.log('是否登录',num);
if(num.code==1001){
next();
}else{
alert('您的token已超时，请重新登录');
next('/Login');
}
})
}else{
next('/Login');
}
}
} else {
console.log("请先登录");
next()
}
})
//或者简洁的可以：
router.beforeEach((to,from,next)=>{
if(localStorage.getItem('token')||to.name=='login'){
next()
}else{
//如果没有token值,则跳到登录页面
next({path:'/login'})
}
next()
})
二 请求拦截
统一处理错误及配置请求信息
- 安装 axios , 命令： npm install axios --save-dev
- 在根目录的config目录下新建文件 axios.js ，内容如下：
import axios from 'axios'
// 配置默认的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
});
请求拦截 根据自己的需求加对应的代码
