Vue使用cookie和session

　　Vue使用cookie和session

一：cookie和session

　　為了防止數據運輸或存儲終端，特地設置了cookie和session，他們其實都是將數據存儲當地。

　　cookie數據保存在客戶端，session數據保存在服務器端

　　所以一般session的使用會比cookie的使用會更加安全， 將登陸信息等重要信息存放為SESSION;其他信息如果需要保留，可以放在COOKIE中。 防止服務器端數據泄露，當然，同時session的高安全與高訪問量也會導致服務器性能占比也會大很多。

 

二：vue使用cookie

//1.引入cookie依賴
npm install vue-session/vue-cookies --save
​
//2.給main.js配置使用：
import Vuecookie/Vuesession from 'vue-cookie/vue-session'
Vue.use(Vuecookie/Vuesession)
​
//3.使用：
this.$session.set("key",value);//創建session，或者再加一個表示持續時間的參數
this.$session.get("key");//獲取session對象

 

三：Vue-cookie處理cookie

 

//1.同上導入依賴
//2.配置main.js
import cookie from 'vue-cookie'
Vue.prototype.$cookie=cookie//創建本地cookie
​
//3.組件當中使用：
create(){this.$cookie.set('token',"asdasd")}
mouted(){this.$cookie.get('token')}
destory(){this.$cookie.delete('token')}
​
//4.設置到期時間：
    this.$cookies.config('固定時間') //填的值1d為一天,1h為一小時,1min為一分鍾,1s為1秒
 
    //指定時間
    this.$cookies.config(new Date(2020,12,1))
    this.$cookies.config("Sat, 13 Mar 2017 12:25:57 GMT")
​
    //不寫過期時間，默認為1天過期
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")

 

四：cookie參數：

默認：$cookies.config(expireTimes[,path[, domain[, secure[, sameSite]]])

默認: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = ''

1. key : cookie名

2. value : cookie值, vue-cookie 會自動幫你把對象轉為:

   json if (value && value.constructor === Object ){
       value = JSON.stringify(value)
   }

3. expireTimes : cookie有效時間，默認時間為1d 可為到期時間點(expire=) [Date]，也可為有效時間段單位s(max-age=)[Number]， 傳入Infinity||-1被認該cookie永久有效， 傳入0 會被判斷為false導致取默認值， 傳入非-1 的負數會立即刪除該cookie， 傳入String類型但又不會被正則匹配的('0'、'abc'、'Session')則關閉瀏覽器的時候銷毀cookie(Expire/Max-Age=Session)，效果類似Session。

4. path : cookie所在目錄，默認 '/' 根目錄

5. domain : cookie所在的域，默認為請求地址

6. secure : Secure屬性是說如果一個cookie被設置了Secure=true，那么這個cookie只能用https協議發送給服務器，用http協議不發送