Vue-router路由中的导航守卫和拦截器(Axios)之间的区别

利用简图看出两者之间的关系：

导航守卫：

1. 导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过，如果登陆过，则可以跳转，否则重定向到登录页面
2. 导航守卫是路由的导航守卫
3. 导航守卫只是前段做出判断，检查请求头中是否带有token，并不能判断token是否失效

// 添加路由守卫--导航守卫
// 作用是通过判断来决定当前的路由跳转到底能不能进行
// 这种守卫，只要进行路由的跳转就会自动的触发，不能人为调用
router.beforeEach((to, from, next) => {
    // to:目标路由
    // from:源路由
    // next:下一步的操作，就是用户当前需要进行的操作
    console.log(to);
    // console.log(from);
    // 判断当前用户是否登陆，如果登陆了则可以跳转，否则重定向到登陆页
    // 获取用户登陆之后的token，进行token的判断
    if (to.name == 'personal' || to.name == 'edit_profile') { // 判断是否跳转到个人中心页
        let token = localStorage.getItem('toutiao')
        if (token) {
          next()
        } else {
          Toast('请先登陆')
          // 说明没有登陆，则重定向到登陆页
          next({ name: 'login' })
        }
        } else {
          next()
    }
})

axios拦截器：
// 每次发送请求之前判断vuex中是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

// 添加请求拦截器
// 每一个我们自己封装的axios请求都会经过这个拦截器
axios.interceptors.request.use(function (config) {
    console.log(config)
    // 在发送请求之前做些什么:我要看看有没有token,如果有，则以请求头的方式进行传递
    let token = localStorage.getItem('toutiao')
    if (token) {
      // 设置请求头
      config.headers.Authorization = token
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

别忘了我们axios拦截器验证完token后，进行响应，

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log(response)
    if(response.data.message === '用户信息验证失败'){
        // this.$router.push({name:'Login'})
        window.location.href='#/login'
    }
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
})

导航守卫和axios拦截器的区别

1. 导航守卫就是路由守卫，想进入一个页面时，判断是否有权限访问(有token，就有权限，没有就返回)，但并不能判断是否失效。
2. axios拦截器是发送请求判断token的有效性，如果有就将token放在请求头里。
3. 导航守卫和axios拦截器一起使用，进而来确保登录的状态

想要更深层次的理解请参考文档：
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html