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.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;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。