Vue-cookie

思路

1 如果前后台一體的情況，后台會負責頁面的渲染同時會負責設置cookie。

2 但是現在是前后台分離，那么前台會負責拿到cookie數據設置到瀏覽器上

3 具體就是Vue會從后台拿到cookie數據放到瀏覽器上。

Vue cookie的使用

安裝：前端項目目錄下的終端

>: npm install vue-cookie --save

配置：main.js

// 配置cookie
import cookie from 'vue-cookie'
Vue.prototype.$axios = cookie;

使用：組件的邏輯方法中

created() {
    console.log('組件創建成功');
    let token = 'asd1d5.0o9utrf7.12jjkht';
    // 設置cookie默認過期時間單位是1d(1天)，默認過期時間是瀏覽器會話結束的時候
    this.$cookie.set('token', token, 1);
},
mounted() {
    console.log('組件渲染成功');
    let token = this.$cookie.get('token');
    console.log(token);
},
destroyed() {
    console.log('組件銷毀成功');
    // 刪除是吧token置空
    this.$cookie.delete('token')
    this.$cookies.isKey('token')
}

Vue cookie詳細使用

全局設置

// 30天后過期
this.$cookies.config('30d')

this.$cookies.config(new Date(2019,03,13).toUTCString())

this.$cookies.config(60 * 60 * 24 * 30,'');

// window object
window.$cookies.config('30d')

單個name設置

//不寫過期時間，默認為1天過期
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")

// 1天過期，忽略大小寫
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1d")
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")

// 以秒為單位，設置1天過去
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",60 * 60 * 24)

// 填寫Date對象，明確指定過期時間
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", new Date(2017, 03, 12))

// 填寫一個時間字符串，指定過期時間
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")

//瀏覽器會話結束時過期
this.$cookies.set("default_unit_second","input_value","0");
 
//永不過期
this.$cookies.set("default_unit_second","input_value",-1); 

字符串單位形式設置

Unit	full name
y	year
m	month
d	day
h	hour
min	minute
s	second

this.$cookies.set("token","GH1.1.1689020474.1484362313","60s");  // 60秒后過去

this.$cookies.set("token","GH1.1.1689020474.1484362313","30MIN");  // 30分鍾后過去

this.$cookies.set("token","GH1.1.1689020474.1484362313","24d");  // 24天后過期

this.$cookies.set("token","GH1.1.1689020474.1484362313","4m");  // 4個月后過期

this.$cookies.set("token","GH1.1.1689020474.1484362313","16h");  // 16小時后過期

this.$cookies.set("token","GH1.1.1689020474.1484362313","3y");  // 3年后過期