【前端】localStorage設置過期時間

前言

  項目中用戶登陸之後，用戶攜帶權限認證的Authorization 的token信息，會有一個過期時間，但是在項目中如何判定這個token過期，並要求用戶重新登錄，獲取一個新的token呢？這時我們就需要使用localStorage設置一個key,存放過期時間。

父類中寫方法

一、BaseUI類中寫方法

  1.BaseUI是前端系統各個頁面都繼承的父類
  2.父類中添加方法，全局調用
  3.具體添加兩個方法
  方法一：設置key的過期時間

/**
     * 給storage的key設置過期時間
     * @param key  鍵
     * @param value 值
     * @param expire 過期時間，單位是分鐘
     * @author 馮浩月
     * @since 2019年8月10日10:30:11
     */
    setStorageExpire(key: string, value: string, expire: any) {
        const obj = {
            data: value,
            time: Date.now(),
            expire: 1000 * 60 * expire  // 單位是分鐘
        };
        localStorage.setItem(key, JSON.stringify(obj));
    }

  方法二：判斷是否過期，過期則返回null

 /**
     * 判斷key是否過期
     * @param key 鍵
     * @author 馮浩月
     * @since 2019年8月10日10:30:11
     */
    getStorageExpire(key: string): any {

        const val = localStorage.getItem(key);
        if (val != null) {
            this.storageInfo = JSON.parse(val);
            const timeSpan = Date.now() - this.storageInfo.time;

            if (timeSpan > this.storageInfo.expire) {
                localStorage.removeItem(key);
                return null;
            }

            return this.storageInfo.data;

        }
        return null;

    }

登錄頁面設置過期key

login.page.ts

  1.用戶登錄成功的方法中，添加key
  2.代碼

 // 設置登錄的過期時間300分鐘 單位分鐘
  this.setStorageExpire('expireLoin', '登錄過期時間（分鐘）', 300);

首頁等頁面判斷過期key，是否過期

home-main.page.ts

  1.頁面加載方法中，判斷過期key
  2.代碼

 // 驗證過期時間
    if (this.getStorageExpire('expireLoin') === null) {
      this.router.navigateByUrl('login');
    }

小結

  實現過期時間的思路其實很簡單，不需要使用Storage.prototype.setExpire()方法，這個方法我的lib庫裏面沒有，直接操作localStorage就可以。 感謝您的訪問！