快捷導(dǎo)航

通過vue如何設(shè)置header

更新時間：2023年02月23日 10:33:25 作者：三知之靈

這篇文章主要介紹了通過vue如何設(shè)置header,每個項(xiàng)目都有頭部但是內(nèi)容不一樣;這種情況我們可以考慮在app.vue中創(chuàng)建公共頭部，那么怎么配置公共頭部header，下面小編通過實(shí)例代碼詳細(xì)講解，需要的朋友可以參考下

vue設(shè)置header

使用vue-resource與vue-cookie實(shí)現(xiàn)頁面登錄，數(shù)據(jù)存儲與后臺的數(shù)據(jù)交互

后端交互對vue中contentType，和ajax的contentType區(qū)別對待

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");
          }
        );

當(dāng)服務(wù)器端需要設(shè)置contentType:“application/json”：

如果采用的是傳統(tǒng)的$.ajax方式進(jìn)行交互時設(shè)置contentType:"application/json;charset=UTF-8"也會導(dǎo)致服務(wù)器訪問不成功必須嚴(yán)格設(shè)置為contentType:“application/json”；

在這里插入圖片描述

當(dāng)使用vue中的vue-resource方式交互時，即使不設(shè)置contentType:"application/json"也可成功交互；

vue方式交互

為什么ajax要求那么嚴(yán)格，原因還不是很清楚；
但是我們可以通過以上方式：每個http請求中加入以下代碼，進(jìn)行設(shè)置請求頭

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

全局設(shè)置請求頭

雖然上述方式可以成功的設(shè)置請求頭，但是每個請求都設(shè)置顯得繁瑣，而從網(wǎng)上查找解決方案始終沒有成功解決
解決問題的主要思路：

1.使得請求頭中存在token

在這里插入圖片描述

網(wǎng)上提供方式：

Vue.http.interceptors.push((request, next) => {
      // ...
      // 請求發(fā)送前的處理邏輯
     request.beforeSend = function() {
             request.headers['token'] = “token”;
     }
  next((response) => {
      // ...
      // 請求發(fā)送后的處理邏輯
      // ...
      // 根據(jù)請求的狀態(tài)，response參數(shù)會返回給successCallback或errorCallback
      return response
  })

測試后發(fā)現(xiàn)用以上攔截器的方式不可行，查到網(wǎng)上有說可以嘗試

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

方式，但是測試后發(fā)現(xiàn)仍行不通，通過各種嘗試最后發(fā)現(xiàn)是去除request.beforeSend直接設(shè)置皆可以

Vue.http.interceptors.push((request, next) => {
  // 請求發(fā)送前的處理邏輯
  request.headers.set('token', "Bearer ")
  next((response) => {
    // 請求發(fā)送后的處理邏輯
    // 根據(jù)請求的狀態(tài)，response參數(shù)會返回給successCallback或errorCallback
    return response
  })
})

如何獲取真實(shí)的token,

因?yàn)槿衷O(shè)置是在main.js中，而token是在登錄后才存儲下來的能否獲取到真實(shí)值
1.確保你的token確實(shí)存在
2.正常程序中通過this.$cookies.get(“token”)可以獲取token的值，因?yàn)閷ue的認(rèn)知不夠深，不知道在入口文件處如何獲取token值，通過多次測試獲取解決方案

import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies);
Vue.http.interceptors.push((request, next) => {
  // 請求發(fā)送前的處理邏輯
  request.headers.set('Authorization', "Bearer " + VueCookies.get("token"))
  next((response) => {
    // 請求發(fā)送后的處理邏輯
    // 根據(jù)請求的狀態(tài)，response參數(shù)會返回給successCallback或errorCallback
    return response
  })
})

擴(kuò)展：vue 配置公共頭部(header)

需求:整個項(xiàng)目;每個項(xiàng)目都有頭部但是內(nèi)容不一樣;這種情況我們可以考慮在app.vue中創(chuàng)建公共頭部;

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狀態(tài)管理中
    ...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: {//設(shè)置屬性
            headerTitle:'',
        },
        getters:{ // getters 用來獲取sate里面存儲的數(shù)據(jù)
 
        },
         mutations: {//更改屬性的狀態(tài)//返回來會有兩個狀態(tài)一個是上面的state,還有一個是返回來的狀態(tài)(形參),返回之后將我們請求回來的數(shù)據(jù)賦給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: "粵警監(jiān)管", // 添加該字段，表示進(jìn)入這個路由是需要登錄的
            keepAlive: true
          }
        },
    ]
})

到此這篇關(guān)于通過vue如何設(shè)置header的文章就介紹到這了,更多相關(guān)vue設(shè)置header內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: