【前端】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就可以。 感谢您的访问！