导航守卫的作用
导航守卫是在vue-router中的提供的路由跳转的时候做一些事情,根据给定的条件来进行跳转
全局守卫 router.beforeEach 主要是用来验证用户的登陆状态。
局部导航守卫 router.beforeEnter 主要是用来守卫当前路由。
无论是全局守卫还是局部守卫,每个守卫的方法都有三个参数, to, from, next
to: 即将要进入的路由对象
from: 当前导航要离开的路由
next: 一个回调函数, 一定要调用这个方法,不然路由不会继续往下 resolve 类似 node 中的中间件。
axios拦截器的作用
在请求发送或响应被.then 或者 .catch 之前先拦截下来 分为请求拦截器和响应拦截器, 在发送请求和接收响应的时候触发 拦截器中的回调函数一定要有返回值
// 设置请求拦截
axios.interceptors.request.use(function (config) {
// 在请求头中加入 token
config.headers.Authorization = window.sessionStorage.getItem("token");
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// 设置响应拦截
axios.interceptors.response.use(function (response) {
// 在响应回来的数据中先判断 token 是否有效, 如果无效则让用户重新登陆
if (response.data.meta.status == 400 && response.data.meta.msg == "无效token") {
Vue.prototype.$message.warning('请先登录')
router.push('/login')
}
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
导航守卫和axios拦截器的区别
导航守卫只是前端这边做判断,检查请求头中是否带有token, 并不能判断 token 是否失效。
而 axios拦截器是发送请求到后端那边,后端来判断token的有效性,再决定用户的登陆状态。
两者可以一起配合使用 来保证登陆状态
————————————————
版权声明:本文为CSDN博主「前端菜鸡小宇」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44718825/article/details/103194905