vue-element-admin後臺 登入時 [記住我] 功能

1.服務端set-cookie根據login的引數rememberMe設定cookie的週期是‘當前會話’還是一段時間，如1一週。同時允許跨域訪問

header("Access-Control-Allow-Origin: 域名"); //PHP
 @CrossOrigin //Spring mvc

2.登入後，服務端把token的cookie資訊通過http報文傳送回瀏覽器。
3.axios訪問時，需設定允許攜帶cookie，才能在要求登入的介面中帶上伺服器端的cookie資訊。

export function setToken(token, persistent =false) {
   if (persistent) {
         return Cookies.set(TokenKey, token, {expires: EXP })
   }else {
        return Cookies.set(TokenKey, token)
    }
}

const service = axios.create({
baseURL: base_url, // api 的 base_url
   timeout:5000, // 請求超時時間
   withCredentials:true// 允許攜帶cookie
})

4.當前token可通過'js-cookie'中的set方法（每個瀏覽器對cookie的大小和數量都有限制）

 Cookies.set(TokenKey, token, {expires: EXP })

5.可使用本地儲存儲存使用者資訊，過期時間與服務端一致
如果是rememberMe=true，則使用localStorage儲存，並設定過期時間；
如果rememberMe=false，則使用sessionStorage儲存，會話結束就過期（也可以使用cookie記錄使用者資訊）。

6. 設定儲存的過期時間

//utils/auth.js 
const userInfoKey ='userInfo'
const EXP =7 // day
export function setUserInfo(data, persistent =false) {
    if (persistent) {
        localStorageSetItem(userInfoKey, data)
    }else {
        sessionStorage.setItem(userInfoKey, JSON.stringify(data))
    }
}

// EXP * 24 * 60 * 60 * 1 * 1000
export function getUserInfo() {
    if (sessionStorage.getItem(userInfoKey)) {
        return JSON.parse(sessionStorage.getItem(userInfoKey))
    }else {
        return localStorageGetItem(userInfoKey, EXP *24 *60 *60 *1 *1000)
    }
}

//utils/index.js
// localStorage的Set方法封裝:記錄時間
export function localStorageSetItem(key, value) {
    const curTime =new Date().getTime()
    localStorage.setItem(key, JSON.stringify({data: value, time: curTime }))
}
// localStorage的Get方法封裝:根據過期時間獲取
export function localStorageGetItem(key, exp) {
    const data = localStorage.getItem(key)
    const dataObj = JSON.parse(data)
    if (new Date().getTime() - dataObj.time > exp) {
        onsole.log('使用者資訊已過期')
        return {}
    }else {
        return dataObj.data
  }
}