1.导航守卫的作用是通过判断来决定当前的路由跳转能否进行,可以判断当前用户是否登陆(是否携带token),如果登陆了则可以跳转,否则重定向到登陆页
2.导航守卫是路由导航守卫,只是前端做出判断,检查请求头中是否携带token,但是并不能判断token是否过期
index.js
// 挂载路由导航守卫, to:将要访问的路径 from: 从哪个路径而来 next()代表放行,next('/login')代表强制放行
router.beforeEach((to, from, next) => {
if (to.path === '/login') next();
const tokenStr = window.sessionStorage.getItem('token');
if (!tokenStr) next('/login');
return next();
});
export default router;
axios请求拦截器 main.js
是用于拦截用户请求并做出相应的处理,一般判断权限的认证,有没有登陆之类(是否携带token,token是否过期),认证通过后就可以发送请求了
// 添加请求拦截器
axios.interceptors.request.use( config => {
// 请求之前看看有没有token。如果有,则以请求头的方式进行穿的
let token = window.sessionStorage.getItem('token');
if (token) {
// 设置请求头,将token携带
config.headers.x-client-token == token;
}
return config;
}, error => {
// 请求错误
return Promise.reject(error);
});
发送请求之前判断是否存在token,如果存在则每次请求时,请求头都加上tooken,后端根据token判断登陆情况,但也存在token过期,所以要做响应拦截器中对返回值做判断。
// 响应拦截器
axios.interceptors.response.use( response => {
window.console.log(response);
if (response.data.message === '用户信息验证失败'){
window.location.href = '/'
}
return response;
}, error => {
return Promise.reject(error);
})
导航守卫和axios拦截器对区别
1.导航守卫就是路由路由守卫,判断是否有权限访问(是否有token),但并不能判断是否失效(token是否过期)
2.axios拦截器是发送请求判断token有效性,如果有就把token放在请求头里
3.建议导航守卫和axios拦截器一起使用,保证登陆的状态