Shulou(Shulou.com)06/01 Report--

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,')

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.