发表于： 2019-10-07 23:35:00
1 923
今天完成的事情：
1.学到了什么是路由守卫，全局守卫就是在router.js里面添加相应的代码，类似于生命周期的钩子：
router.beforeEach((to, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
let isLogin = global.isLogin; // 是否登录
// 未登录状态；当路由到nextRoute指定页时，跳转至login
if (nextRoute.indexOf(to.name) >= 0) {
if (!isLogin) {
console.log('what fuck');
router.push({ name: 'login' })
}
}
// 已登录状态；当路由到login时，跳转至home
if (to.name === 'login') {
if (isLogin) {
router.push({ name: 'home' });
}
}
//一定要调用next方法，会让当前钩子依次往后执行
next();
})
例如这个beforeEach就是在路由跳转前判断是否触发一些验证，然后进行相应的路由跳转，比如确认是否后台有返回参数，如果有并且是success，则正常通过，如果不是，则返回登录页的路由，达到拦截的效果。
2.然后是看了一下axios拦截，因为项目中通常使用token进行用户权限认证，需要在请求的header中添加token信息进行验证，拦截返回的状态码进行跳转或重新登陆，因此可以在axios.js文件中进行配置：
// 拦截请求
_axios.interceptors.request.use(
config=> {
// Do something before request is sent在发出请求前做点什么
console.log(config);
let t = cookies.get('t')
if (t) {
config.headers.t = t
} else {
router.replace({path: '/login'})
}
return config;
},
error=>{
// Do something with request error处理请求错误
return Promise.reject(error);
}
);
// Add a response interceptor添加响应拦截器
// 即拦截响应
_axios.interceptors.response.use(
response=> {
// Do something with response data处理响应数据
console.log(response)
return response;
},
error=> {
// Do something with response error处理响应错误
console.log(err);
if (err.response) {
switch (err.response.status) {
case 401:
// 这里写清除token的代码
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error);
}
);
明天计划：进行复盘ppt的制作
返回列表
评论