美文网首页
Vue中怎么去封装一个axios请求并且判断token是否生效

Vue中怎么去封装一个axios请求并且判断token是否生效

作者: 上海老宅男 | 来源:发表于2020-03-08 22:47 被阅读0次
    import {removeToken} from '@/utils/auth'
    const apiMethods = {
      methods: {
        apiGet(url, params) {
          var that=this
          return new Promise((resolve, reject) => {
            axios.get('请求地址'+url, {params}).then((response) => {
            /*
            *这个地方根据返回值判断,如果说token不合法的话那么就removeToken。这样就判断了token是否有效
            */
              if(response.data.message == 'Token不合法'){
                removeToken()
              }
              resolve(response)
            }, (response) => {
              reject(response)
              _g.closeGlobalLoading()
              that.$message({
                message: '请求超时,请检查网络',
                type: 'warning'
              })
            }).catch(error => {
              console.log('shibai ',error)
            })
          })
        },
    
        apiPost(url, data,head) {
          return new Promise((resolve, reject) => {
            axios.post('请求地址'+url, data,head).then((response) => {
              if(response.data.message == 'Token不合法'){
                setstorage('token','')
                removeToken()
              }
              resolve(response.data)
            }).catch((response) => {
              resolve(response)
            })
          })
        },
        apiDownload(url,param){
          return new Promise((resolve, reject) => {
            axios.post(url, param, {
              'responseType': 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
            }).then(function (response) {
              const blob = new Blob([response.data]);
              const fileName = Math.floor(Math.random()*1000000000)+'.xlsx';
              const linkNode = document.createElement('a');
    
              linkNode.download = fileName; //a标签的download属性规定下载文件的名称
              linkNode.style.display = 'none';
              linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
              document.body.appendChild(linkNode);
              linkNode.click();  //模拟在按钮上的一次鼠标单击
    
              URL.revokeObjectURL(linkNode.href); // 释放URL 对象
              document.body.removeChild(linkNode);
              resolve(response.data)
            }).catch(function (error) {
              console.log(error);
              resolve(error)
            });
          });
    
    
        },
        apiDelete(url, id) {
          return new Promise((resolve, reject) => {
            axios.delete('https://dev.deercal.com'+url + id).then((response) => {
              resolve(response.data)
            }, (response) => {
              reject(response)
              _g.closeGlobalLoading()
              bus.$message({
                message: '请求超时,请检查网络',
                type: 'warning'
              })
            })
          })
        },
        apiPut(url, id, obj) {
          return new Promise((resolve, reject) => {
            axios.put(url + id, obj).then((response) => {
              resolve(response.data)
            }, (response) => {
              _g.closeGlobalLoading()
              bus.$message({
                message: '请求超时,请检查网络',
                type: 'warning'
              })
              reject(response)
            })
          })
        },
        handelResponse(res, cb, errCb) {
          _g.closeGlobalLoading()
          if (res.code == 200) {
            cb(res.data)
          } else {
            if (typeof errCb == 'function') {
              errCb()
            }
            this.handleError(res)
          }
        },
        handleError(res) {
          if (res.code) {
            switch (res.code) {
              case 101:
                console.log('cookie = ', Cookies.get('rememberPwd'))
                if (Cookies.get('rememberPwd')) {
                  let data = {
                    rememberKey: Lockr.get('rememberKey')
                  }
                  this.reAjax('admin/base/relogin', data).then((res) => {
                    this.handelResponse(res, (data) => {
                      this.resetCommonData(data)
                    })
                  })
                } else {
                  _g.toastMsg('error', res.error)
                  setTimeout(() => {
                    router.replace('/')
                  }, 1500)
                }
                break
              case 103:
                _g.toastMsg('error', res.error)
                setTimeout(() => {
                  router.replace('/')
                }, 1500)
                break
              // case 400:
              //   this.goback()
              //   break
              default :
                _g.toastMsg('error', res.error)
            }
          } else {
            console.log('default error')
          }
        },
        resetCommonData(data) {
          _(data.menusList).forEach((res, key) => {
            if (key == 0) {
              res.selected = true
            } else {
              res.selected = false
            }
          })
          let routerUrl = ''
          if (data.menusList[0].url) {
            routerUrl = data.menusList[0].url
          } else {
            routerUrl = data.menusList[0].child[0].child[0].url
          }
          setTimeout(() => {
            let path = this.$route.path
            if (routerUrl != path) {
              router.replace(routerUrl)
            } else {
              _g.shallowRefresh(this.$route.name)
            }
          }, 1000)
        },
        reAjax(url, data) {
          return new Promise((resolve, reject) => {
            axios.post(url, data).then((response) => {
              resolve(response.data)
            }, (response) => {
              reject(response)
              bus.$message({
                message: '请求超时,请检查网络',
                type: 'warning'
              })
            })
          })
        }
      },
      computed: {
        showLoading() {
          return store.state.globalLoading
        }
      }
    }
    
    export default apiMethods
    

    相关文章

      网友评论

          本文标题:Vue中怎么去封装一个axios请求并且判断token是否生效

          本文链接:https://www.haomeiwen.com/subject/kpssdhtx.html