Vue如何为GET或POST请求设置请求头_vue.js

首页 / 新闻资讯 / 正文

为GET或POST请求设置请求头

安装vue-cookies

就通过我写的一个小项目的登录来讲vue-cookies,登陆成功后拿到后台返回的token值,把它保存到vue-cookies中

首先需要安装vue-cookies

npm install vue-cookies --save

使用

import Vue from 'vue'  import VueCookies from 'vue-cookies'  Vue.use(VueCookies);

设置cookies

this.$cookies.set("自定义名字",后台获取的token)

示例

 //Login.vue   Login(){   //登录             this.$http.post('home/login',                            {"uPwd":this.password,"uPhone":this.account}).then(result=>{                          if(result.body.status===200){                              this.$cookies.set("auth",result.body.data);                              let redirect=decodeURIComponent(this.$route.query.redirect||"/home");                              this.$router.push({path:redirect});                          }else{                Toast('输入密码或账号错误,请重新输入');                          }                       }).catch(function(){                console.log("服务器异常");                       })                  }           }

全局设置请求头

//index.js  Vue.http.interceptors.push((request, next) => {      //请求发送前的处理逻辑      request.headers.set('auth', VueCookies.get("auth"))      next((response) => {          //请求发送后的处理逻辑          //根据请求的状态,response参数返回给successCallback或errorCallback          return response      })  })

vue项目设置请求头权限问题

新建一个公共js文件。如: lp.js.

//设置请求消息头  export function headers(contentType,token){  let headers={};  headers['Content-Type'] = contentType ? contentType : 'application/json;charset=utf-8';    let a = window.location.href;    let b = a.indexOf("#");    let loginUrl = a.substring(b+2);    if(loginUrl){      localStorage.loginUrl = loginUrl;    }    let url = a.substring(0,b+2);    if(loginUrl==='login' || loginUrl==='reg' || loginUrl==='phoneAuth' || loginUrl=='emailInfo'){        token='';    }else{     token=window.localStorage.getItem('jingjing_login_token');    }    token = token ? token : '';  let key = 'jmjbGEWO4EyItpA4';  let current_timestamp = new Date().getTime() + '';  let nonce_str = getNonceStr(32);  let lp_sign = sign(token, current_timestamp, nonce_str, key);  headers['token'] = token;  headers['current-timestamp'] = current_timestamp;  headers['nonce-str'] = nonce_str;  headers['lp-sign'] = lp_sign;  return headers; 
}  //生成随机字符串  export function getNonceStr(len) {      len = len || 32;      let chars = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';      let maxPos = chars.length;      let s = '';      for (let i = 0; i < len; i++) {          s += chars.charAt(Math.floor(Math.random() * maxPos));      }      return s;  }  //  在组件中使用直接引用,  import {headers} from '@/assets/js/common/lp.js'    methods: {         // 获取员工架构        getTree() {          // that.$emit('updataTree')          let that = this          this.$http({                    method:"get",                    url:api.treeList,                    **headers:headers('application/json;charset=utf-8'),**                    cache:false                }).then(function(res){                    if(res.data.code==10000 || res.data.data==null){              that.treeDatas = res.data.data              console.log(that.treeDatas,'<//====treeDatas')                    }else{                    that.$message.error(res.data.msg);                    }          });        },     } 

其中api.js中这么定义

 let Butterfly="http://192.168.6.207:8891/jersey/";//xxip  const api = {    baseUrl:Butterfly,    treeList:Butterfly+'enterpriseInfo/current/user',    };  export default api;

当然在路由请求时需要设置,在router.js文件中

router.beforeEach((to, from, next) => {      if(!localStorage.jingjing_login_token && to.path!=='/' && to.name !== 'phoneAuth' && to.name !== 'reg' && to.name !== 'agree'  && to.name !== 'restPsd' && to.name !== 'ablityAssessment' && to.name !== 'leaveAssessment' && to.name !== 'contact' && to.name !== 'wasAsked' && to.name !== 'newWitesite_index' && to.name !== 'bySinging' && to.name !== 'brokenQuery' && to.name !== 'login'){       router.push({path:'/login'});      }else{          let a = window.location.href;          let b = a.indexOf("#");          let loginUrl = a.substring(b+2);          if(loginUrl){            localStorage.loginUrl = loginUrl;          }         next();      }  });  export default router;