Vue怎么为GET或POST请求设置请求头

这篇文章主要介绍了Vue怎么为GET或POST请求设置请求头的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue怎么为GET或POST请求设置请求头文章都会有所收获，下面我们一起来看看吧。

为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.jsVue.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/";//xxipconst 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;

关于“Vue怎么为GET或POST请求设置请求头”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue怎么为GET或POST请求设置请求头”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。