vue 設置Header驗證token登錄

1、

cookies.js文件

//設置cookie
// export function setCookie ((_keyname, _value, _live) {
export function setCookie (_keyname, _value) {
    // let d = new Date();
    // d.setDate(d.getDate()+_live);
    // document.cookie = _keyname+"="+_value+";expires="+d.toGMTString();
    document.cookie = _keyname+"="+_value;
};
//獲取cookie
export function getCookie(_keyname){
    if (document.cookie.length>0){
        let c_start=document.cookie.indexOf(_keyname + "=")
        if (c_start!=-1){ 
            c_start = c_start + _keyname.length+1 
            let c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        } 
    }
};
/*刪除cookie*/
export function delCookie(_keyname) {
    setCookie(_keyname, "", -1)
};

2、main.js

import {setCookie,getCookie,delCookie} from'./components/cookies.js'   //引用
//定義全局變量
Vue.prototype.$setCookie = setCookie;
Vue.prototype.$getCookie = getCookie;
Vue.prototype.$delCookie = delCookie;

3、頁面應用（這裏的token數據爲後臺返回）

 //設置頭部token
    login(){
        this.$http.post(this.GLOBAL.serverSrc + '/api/Login/LoginOn', {}, {
               header: {},
               emulateJSON: true
            }).then((res) => {
                 console.info(res);
                this.$setCookie('token', res.body.token);   //設置token,爲後臺返回的值			
		    }).catch(err => {
              console.info("訪問接口失敗");
            })
	}
   //獲取token驗證,獲取數據
    slectList() {
        /*接口請求*/
        this.$http.post(this.GLOBAL.serverSrc + '/api/test/test1', {}, {
          headers: {
            'token': this.$getCookie('token')      //主要應用在這裏
          },
          emulateJSON: true
        }).then((res) => {          
            console.info(res.body.result);          
        }).catch(err => {
          console.info("訪問接口失敗");  
        })
    },

當然，上個效果圖會更好

圖一

圖二

ok,完成了哦！