vue-router导航守卫和axios请求拦截器的区别

请求拦截器

        现在已经进入了目标页面了，在浏览器中需要进行加载资源，即用户进行资源请求。常见的用法就是：假设某个系统中除了登录页面，其他页面加载资源时都需要添加token，此时可以通过请求拦截器，为请求添加带token的请求头。

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

导航守卫

        在进行页面访问的时候，我们可以直接在搜索框中输入网址，进入目标页面。如果没有任何限制，用户可以直接访问需要登录的一些页面，导致一些问题的出现，因此可以通过导航守卫，来监控用户的目标访问地址。导航守卫同样可以添加token的设置，但是它只能访问本地token，并不像请求拦截器一样向后端进行请求，也就是说即使token过期了它也无法检测出来。

    // 作用是通过判断来决定当前的路由跳转到底能不能进行
    router.beforeEach((to, from, next) => {
      // to:目标路由
      // from:源路由
      // next:下一步的操作，就是用户当前需要进行的操作

      // 判断当前用户是否登陆，如果登陆了则可以跳转，否则重定向到登陆页
      // 获取用户登陆之后的token，进行token的判断
      if (to.path !== '/login' || to.path !== '/register') { // 非登录页面验证是否存在token
        let token = localStorage.getItem('token')
        if (token) {
          next()
        } else {
          // 说明没有登陆，则重定向到登陆页
          next({
             name: 'login'
          })
        }
      } else {
        next()
      }
    })

        总体来说，在进行页面权限判断的时候可以使用导航守卫和请求拦截器共同合作：

        前者简单判断是否有token，不管这个token是否是真的或者是有效，如果不存在/失效就redrict；

        后者是向后端发出请求，如果token合法就成功访问，如果错误/失效就redrict