How does Vue set request headers for GET or POST requests
This article mainly introduces the relevant knowledge of how Vue sets the request header for GET or POST requests, the content is detailed and easy to understand, the operation is simple and fast, and it has certain reference value. I believe you will gain something after reading this Vue article on how to set request headers for GET or POST requests. Let's take a look.
Set request headers to install vue-cookies for GET or POST requests
Let's talk about vue-cookies through the login of a small project I wrote. After a successful login, we get the token value returned by the background and save it to vue-cookies.
First you need to install vue-cookies
Npm install vue-cookies-save
Use
Import Vue from 'vue'import VueCookies from' vue-cookies'Vue.use (VueCookies)
Set up cookies
This.$cookies.set ("custom name", the token obtained at the backend)
Example
/ / Login.vue Login () {/ / Log in to 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 ('incorrect password or account, please re-enter') ) .catch (function () {console.log ("server exception");})}
Global setting request header
/ / index.jsVue.http.interceptors.push ((request, next) = > {/ / the processing logic before the request is sent request.headers.set ('auth', VueCookies.get ("auth")) next ((response) = > {/ / the processing logic after the request is sent / / according to the status of the request, the response parameter is returned to successCallback or errorCallback return response})}) vue project sets the request header permission problem
Create a new public js file. For example, lp.js.
/ / set the request header 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 (bread2); if (loginUrl) {localStorage.loginUrl = loginUrl;} let url = a.substring (0membici2); 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_timestheaders ['nonce-str'] = nonce_str;headers [' lp-sign'] = lp_sign;return headers } / / generate random string export function getNonceStr (len) {len = len | | 32; let chars = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQSTUVWXYZ; let maxPos = chars.length; let s =''; for (let I = 0; I < len; iTunes +) {s + = chars.charAt (Math.floor (Math.random () * maxPos));} return s } / / use direct references in components Import {headers} from'@ / assets/js/common/lp.js' methods: {/ / get employee architecture 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,')
