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

目录
  • 为GET或POST请求设置请求头
    • 安装vue-cookies
  • vue项目设置请求头权限问题

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue进行post和get请求实例讲解

    目录 一.基本使用方法 1.get请求 2.Post请求 使用axios: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 一.基本使用方法 1.get请求 // Make a request for a user with a given ID axios.get('/user?ID=12345')  .then(function (response) {   console.

  • vue-resouce设置请求头的三种方法

    本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showList: true, title: null }, http: { root: '/', headers: { token: token } } }) 第二种:全局设置请求头 Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第三种:在拦截器

  • 详解Vue-axios 设置请求头问题

    在axios向后端传参时需要设置请求头,确保请求参数的格式为JSON字符串(此时用JSON.stringify(obj)无效时) this.$axios({ method:'', url:'', headers: { 'Content-Type': 'application/json',//设置请求头请求格式为JSON 'access_token': this.token //设置token 其中K名要和后端协调好 }, params:{} }).then((response)=>{}) 下面看

  • vue+axios全局添加请求头和参数操作

    走登录的接口都会返回一个token值,然后存起来方便之后调接口的时候给后台传过去,传给后台的方式有两种:(具体使用哪种需要和后台商量) 1.放在请求头中 2.放在接口的参数中 1.放在请求头中 下面代码是从本地cookie中拿token VueCookie:一个用于处理浏览器cookies的简单Vue.js插件. // 在封装axios的文件中添加拦截器 // 添加请求拦截器,在请求头中加token service.interceptors.request.use( config => { //

  • Vue如何为GET或POST请求设置请求头

    目录 为GET或POST请求设置请求头 安装vue-cookies vue项目设置请求头权限问题 为GET或POST请求设置请求头 安装vue-cookies 就通过我写的一个小项目的登录来讲vue-cookies,登陆成功后拿到后台返回的token值,把它保存到vue-cookies中 首先需要安装vue-cookies npm install vue-cookies --save 使用 import Vue from 'vue' import VueCookies from 'vue-coo

  • 为vue项目自动设置请求状态的配置方法

    在进入一个页面的时候,一般在获取数据的同时,会先显示一个 loading ,等请求结束再隐藏 loading 渲染页面,只需要用一个属性去记录请求的状态,再根据这个状态去渲染页面就好了 async handler() { this.loading = true await fetch() this.loading = false } 虽然是很简单的功能,可是要处理的地方多的时候,还是很繁琐的,就想着能不能统一设置处理请求的 loading ,然后页面根据 loading 的状态决定要显示的内容,

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • axios全局请求参数设置,请求及返回拦截器的方法

    应用场景: 1,每个请求都带上的参数,比如token,时间戳等. 2,对返回的状态进行判断,比如token是否过期 代码如下: axios.interceptors.request.use( config => { var xtoken = getXtoken() if(xtoken != null){ config.headers['X-Token'] = xtoken } if(config.method=='post'){ config.data = { ...config.data, _

  • 通过vue提供的keep-alive减少对服务器的请求次数

    下面看下通过vue提供的keep-alive减少对服务器的请求次数 VUE2.0中提供了一个keep-alive方法,可以用来缓存组件,避免多次加载相应的组件,减少性能的消耗.比如, 一个页面的数据包括图片.文字等用户都已经加载完了,然后用户通过点击跳转到了另外一个界面.然后从另外一个界面通过返回又回到了原先的界面.如果没有设置的话,那么原先界面的信息就要重新向服务器请求得到.而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存,减少请求的次数,提高用户的体验程度. 缓存组件

  • vue+springboot实现项目的CORS跨域请求

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解.本文为通过一个小demo对该博客中分析内容的一些验证. 1.springboot+vue项目的构建和启动 细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可. 我的d

  • vue解决一个方法同时发送多个请求的问题

    在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求.这是不允许出现的. 但是怎么解决这个问题呢? 一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就可以避免重复发送请求了.但是我发现这个有一个弊端,那就是: 如果,该事件有许多的验证,比如电话.邮箱格式是否正确呀,必填的是否填了呀等等.一旦你点击就把按钮disabled了,发现该填的没填,回去填完后发现按钮不能点了?那是因为刚才点击的时候被你disabled了,所以还得在验证的方法中取消按

  • Vue 防止短时间内连续点击后多次触发请求的操作

    如果连续点击提交按钮,可能会重复提交数据,导致出错,解决的方法可以使用disabled限制点击,感觉体验不是太好,所有给大家分享下面的方法 <el-button @click="throttle()">测试</el-button> export default { data(){ return { lastTime:0 //默认上一次点击时间为0 } } } methods:{ throttle(){ //获取当前时间的时间戳 let now = new Dat

  • vue路由切换时取消之前的所有请求操作

    在main.js文件里 import router from 'router/'; import Vue from 'vue'; Vue.Cancel = []; router.beforeEach((to, from, next) => { while (Vue.Cancel.length > 0) { Vue.Cancel.shift()('cancel'); } next(); }) ajax文件 import Vue from 'vue'; import axios from 'ax

随机推荐