通过vue如何设置header

 更新时间:2023年02月23日 10:33:25   作者:三知之灵  
这篇文章主要介绍了通过vue如何设置header,每个项目都有头部但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部,那么怎么配置公共头部header,下面小编通过实例代码详细讲解,需要的朋友可以参考下

vue设置header

使用vue-resource与vue-cookie实现页面登录,数据存储与后台的数据交互

后端交互对vue中contentType,和ajax的contentType区别对待

this.$http
        .post(netUrl, change, {
          headers: {
            Authorization: "Bearer " + this.$cookies.get("token")
          }
        })
        .then(
          response => {
            console.log(response.data);
            if (response.data != null) {
            }
          },
          response => {
            console.log("error");
          }
        );

当服务器端需要设置contentType:“application/json”:

如果采用的是传统的$.ajax方式进行交互时设置contentType:"application/json;charset=UTF-8"也会导致服务器访问不成功必须严格设置为contentType:“application/json”;

在这里插入图片描述

当使用vue中的vue-resource方式交互时,即使不设置contentType:"application/json"也可成功交互;

vue方式交互

为什么ajax要求那么严格,原因还不是很清楚;
但是我们可以通过以上方式:每个http请求中加入以下代码,进行设置请求头

 headers: {
    Authorization: "Bearer " + this.$cookies.get("token")
  }

全局设置请求头

虽然上述方式可以成功的设置请求头,但是每个请求都设置显得繁琐,而从网上查找解决方案始终没有成功解决
解决问题的主要思路:

1.使得请求头中存在token

在这里插入图片描述

网上提供方式:

Vue.http.interceptors.push((request, next) => {
      // ...
      // 请求发送前的处理逻辑
     request.beforeSend = function() {
             request.headers['token'] = “token”;
     }
  next((response) => {
      // ...
      // 请求发送后的处理逻辑
      // ...
      // 根据请求的状态,response参数会返回给successCallback或errorCallback
      return response
  })

测试后发现用以上拦截器的方式不可行,查到网上有说可以尝试

request.headers.set('token', "Bearer ")

方式,但是测试后发现仍行不通,通过各种尝试最后发现是去除request.beforeSend直接设置皆可以

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

如何获取真实的token,

因为全局设置是在main.js中,而token是在登录后才存储下来的能否获取到真实值
1.确保你的token确实存在
2.正常程序中通过this.$cookies.get(“token”)可以获取token的值,因为对vue的认知不够深,不知道在入口文件处如何获取token值,通过多次测试获取解决方案

import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies);
Vue.http.interceptors.push((request, next) => {
  // 请求发送前的处理逻辑
  request.headers.set('Authorization', "Bearer " + VueCookies.get("token"))
  next((response) => {
    // 请求发送后的处理逻辑
    // 根据请求的状态,response参数会返回给successCallback或errorCallback
    return response
  })
})

扩展:vue 配置公共头部(header)

需求:整个项目;每个项目都有头部 但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部;

App.vue

<template>
  	<div id="app">
	    <div class="header" v-if="isShowHeader" id="headers">
                <span class="title-info">
                        {{headerTitle}}
                 </span> 
	     </div>
	</div>
</template>
<script>
import { mapState } from "vuex";
import home from "../src/components/home";
 
export default {
  name: "App",
  data() {
    return {
 
    };
  },
  computed: {
    // 存储到store状态管理中
    ...mapState({
      headerTitle: state => state.$vux.headerTitle,
    })
  },
 
};
</script>

store.js

    import Vue from 'vue'
    import Vuex from 'vuex'
 
    Vue.use(Vuex)
    const store = new Vuex.Store({  })
    store.registerModule('$vux', { // 名字自己定义
        state: {//设置属性
            headerTitle:'',
        },
        getters:{ // getters 用来获取sate里面存储的数据
 
        },
         mutations: {//更改属性的状态//返回来会有两个状态一个是上面的state,还有一个是返回来的状态(形参),返回之后将我们请求回来的数据赋给state
                 getHeaderTitle(state, obj) {
                state.headerTitle = obj.headerTitle
            },
        }
 
    export default store

main.js

//全局配置
import Vue from "vue";
import App from "./App";
import router from "./router";
 
  store.commit("getHeaderTitle", { headerTitle: to.meta.title });

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
 
export default new Router({
  // mode: "history",
  linkActiveClass: "on",
     routes: [
        {
          path: "/business",
          name: "business",
          component: business,
          meta: {
            title: "粤警监管", // 添加该字段,表示进入这个路由是需要登录的
            keepAlive: true
          }
        },
    ]
})

到此这篇关于通过vue如何设置header的文章就介绍到这了,更多相关vue设置header内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue.js根据图片url进行图片下载

    vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,本文就介绍了vue.js根据图片url进行图片下载,感兴趣的可以了解一下
    2021-06-06
  • Vue常用API、高级API的相关总结

    Vue常用API、高级API的相关总结

    这篇文章主要介绍了Vue常用API、高级API的相关总结,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • Vue实现倒计时小功能

    Vue实现倒计时小功能

    这篇文章主要为大家详细介绍了Vue实现倒计时小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • SpringBoot实现全局和局部跨域的两种方式

    SpringBoot实现全局和局部跨域的两种方式

    本文主要介绍了SpringBoot实现全局和局部跨域的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue实现移动端悬浮窗效果

    vue实现移动端悬浮窗效果

    这篇文章主要为大家详细介绍了vue实现移动端悬浮窗效果,vuejs实现div拖拽移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 手把手教你搭建vue3.0项目架构

    手把手教你搭建vue3.0项目架构

    这篇文章手把手教你搭建vue3.0项目架构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11
  • vue项目中使用tinymce编辑器的步骤详解

    vue项目中使用tinymce编辑器的步骤详解

    本文分步骤给大家介绍了vue项目中使用tinymce编辑器的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue实现登录记住账号密码功能的思路与过程

    Vue实现登录记住账号密码功能的思路与过程

    最近在学习vue,发现了vue的好多坑,下面这篇文章主要给大家介绍了关于Vue实现登录记住账号密码功能的思路与过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • vue虚拟滚动/虚拟列表简单实现示例

    vue虚拟滚动/虚拟列表简单实现示例

    本文主要介绍了vue虚拟滚动/虚拟列表简单实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • vue 中的 render 函数作用详解

    vue 中的 render 函数作用详解

    这篇文章主要介绍了vue 中的 render 函数作用,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02

最新评论