通过vue如何设置header

凡小生初

vue设置header

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

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

1. this.$http
   
2.         .post(netUrl, change, {
   
3.           headers: {
   
4.             Authorization: "Bearer " + this.$cookies.get("token")
   
5.           }
   
6.         })
   
7.         .then(
   
8.           response => {
   
9.             console.log(response.data);
   
10.             if (response.data != null) {
    
11.             }
    
12.           },
    
13.           response => {
    
14.             console.log("error");
    
15.           }
    
16.         );

复制代码

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

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

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

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

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

复制代码

全局设置请求头

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

1.使得请求头中存在token

网上提供方式：

1. Vue.http.interceptors.push((request, next) => {
   
2.       // ...
   
3.       // 请求发送前的处理逻辑
   
4.      request.beforeSend = function() {
   
5.              request.headers['token'] = “token”;
   
6.      }
   
7.   next((response) => {
   
8.       // ...
   
9.       // 请求发送后的处理逻辑
   
10.       // ...
    
11.       // 根据请求的状态，response参数会返回给successCallback或errorCallback
    
12.       return response
    
13.   })

复制代码

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

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

复制代码

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

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

复制代码

如何获取真实的token,

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

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

复制代码

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

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

1. <template>
   
2.           <div id="app">
   
3.             <div class="header" v-if="isShowHeader" id="headers">
   
4.                 <span class="title-info">
   
5.                         {{headerTitle}}
   
6.                  </span>
   
7.              </div>
   
8.         </div>
   
9. </template>
   
10. <script>
    
11. import { mapState } from "vuex";
    
12. import home from "../src/components/home";
    
13. 
    
14. export default {
    
15.   name: "App",
    
16.   data() {
    
17.     return {
    
18. 
    
19.     };
    
20.   },
    
21.   computed: {
    
22.     // 存储到store状态管理中
    
23.     ...mapState({
    
24.       headerTitle: state => state.$vux.headerTitle,
    
25.     })
    
26.   },
    
27. 
    
28. };
    
29. </script>

复制代码

store.js

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

复制代码

main.js

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

复制代码

router.js

1. import Vue from 'vue'
   
2. import Router from 'vue-router'
   
3. Vue.use(Router)
   
4. 
   
5. export default new Router({
   
6.   // mode: "history",
   
7.   linkActiveClass: "on",
   
8.      routes: [
   
9.         {
   
10.           path: "/business",
    
11.           name: "business",
    
12.           component: business,
    
13.           meta: {
    
14.             title: "粤警监管", // 添加该字段，表示进入这个路由是需要登录的
    
15.             keepAlive: true
    
16.           }
    
17.         },
    
18.     ]
    
19. })

复制代码

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

来源:https://www.jb51.net/article/276235.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！