vue-router中的导航守卫与 axios拦截器的区别

导航守卫的作用

导航守卫是在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的有效性，再决定用户的登陆状态。
• 两者可以一起配合使用 来保证登陆状态