Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭
更新時(shí)間：2022年04月08日 15:13:52 作者：陽(yáng)光之末亞
這篇文章主要介紹了Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭
安裝vue-cookies
就通過我寫的一個(gè)小項(xiàng)目的登錄來(lái)講vue-cookies，登陸成功后拿到后臺(tái)返回的token值，把它保存到vue-cookies中
首先需要安裝vue-cookies
npm install vue-cookies --save
使用
import Vue from 'vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies);
設(shè)置cookies
this.$cookies.set("自定義名字",后臺(tái)獲取的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('輸入密碼或賬號(hào)錯(cuò)誤，請(qǐng)重新輸入');
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ? }).catch(function(){
? ? ? ? ? ? ? console.log("服務(wù)器異常");
?? ??? ??? ??? ??? ? })
?? ??? ??? ??? ?}
?? ??? ? }全局設(shè)置請(qǐng)求頭
//index.js
Vue.http.interceptors.push((request, next) => {
? ? //請(qǐng)求發(fā)送前的處理邏輯
? ? request.headers.set('auth', VueCookies.get("auth"))
? ? next((response) => {
? ? ? ? //請(qǐng)求發(fā)送后的處理邏輯
? ? ? ? //根據(jù)請(qǐng)求的狀態(tài)，response參數(shù)返回給successCallback或errorCallback
? ? ? ? return response
? ? })
})vue項(xiàng)目設(shè)置請(qǐng)求頭權(quán)限問題
新建一個(gè)公共js文件。如： lp.js.
//設(shè)置請(qǐng)求消息頭
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;?}
//生成隨機(jī)字符串
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: {
? ? ? ?// 獲取員工架構(gòu)
? ? ? 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;當(dāng)然在路由請(qǐng)求時(shí)需要設(shè)置，在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;以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE v-for循環(huán)中每個(gè)item節(jié)點(diǎn)動(dòng)態(tài)綁定不同函數(shù)的實(shí)例
今天小編就為大家分享一篇VUE v-for循環(huán)中每個(gè)item節(jié)點(diǎn)動(dòng)態(tài)綁定不同函數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
這篇文章主要介紹了vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了編寫更好的v-for循環(huán)的6種技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue的rules驗(yàn)證部分可以部分又失效的原因及解決方案
vue的rules驗(yàn)證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個(gè)特別的,那就是prop沒有寫全,導(dǎo)致驗(yàn)證某一個(gè)失效,接下來(lái)就跟小編一起來(lái)看看這個(gè)失效的原因和解決方案吧2023-11-11
vue組件實(shí)現(xiàn)可搜索下拉框擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)可搜索下拉框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue組件傳值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機(jī)制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-01-01