• vue中的请求拦截响应


    请求拦截一般做什么操作?

       第一:判断用户是否登录,没有登录的统一跳转到登录页面.

      第二:判断用户是否具有权限,没有权限,提示权限不足.

      ...

      每个项目可能做的处理不一样,看自己需求.

    响应拦截有什么用?

      因为后端每次响应都不一定是成功的,然后前端需要根据不同状态去做不同的处理,如果每个请求都去做处理,会多出很多重复的代码,并且显的很臃肿.

      例如:后端返回资源不存在,token失效,权限不足,重定向等等

      这样我们就可以直接在响应拦截中做一次处理,这样每个请求响应的时候都会经过这一逻辑,减少大量重复代码.看起来也更加美观.

    下面上代码:

    首先我们要在项目中找到main.js文件

    然后引入axios

     接下来就是添加拦截器了,首先是请求拦截

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      // 判断是否存在token,如果存在将每个页面header添加token
      if (sessionStorage.getItem("token")) {
        config.headers.common['Authorization'] = sessionStorage.getItem("token");
      }
      return config
    }, function (error) {
      router.push('/login')
      return Promise.reject(error)
    })

    至于需要在拦截之前做什么操作,就看自己需求了,以上是添加token的操作

    下面的响应拦截,看需求,不需要可以不添加

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response
    }, function (error) {
      // 对响应错误做点什么
      if (error.response) {
        switch (error.response.status) {
          case 401:
            store.commit('del_token')
            router.push('/login')
        }
      }
      return Promise.reject(error)
    })

    好了,到处我们需要的拦截器就完成了,当然了,以上我们只是添加了,以及引入了axios,并没有挂载到vue,所以最后一步不要忘记哦

     至此就完美结束了.

  • 相关阅读:
    通过源码安装PostgresSQL
    mysql 8.0.16 单主 mgr搭建
    美团点评SQL优化工具SQLAdvisor开源快捷部署
    通过springboot 去创建和提交一个表单(七)
    在springboot中验证表单信息(六)
    调度任务(五)
    接收上传的multi-file的文件(四)
    消费Restful的web服务(三)
    关于RabbitMQ服务器整合(二)
    在springboot中用redis实现消息队列
  • 原文地址:https://www.cnblogs.com/wgs-blog/p/14980952.html
Copyright © 2020-2023  润新知